@primestyleai/tryon 5.8.53 → 5.8.55

package/dist/pose-detect.d.ts

@@ -67,7 +67,15 @@ export interface BodyLandmarks {
         y: number;
     };
 }
+/** Pixel dimensions of the image the landmarks were detected on. Sent to
+ *  the backend alongside the landmarks so it can convert normalized x/y
+ *  into pixels — without this, horizontal and vertical distances on a
+ *  non-square image are skewed by the aspect ratio. */
+export interface BodyLandmarksWithDims extends BodyLandmarks {
+    imageWidth: number;
+    imageHeight: number;
+}
 export declare function detectMeasurementLines(imageSrc: string): Promise<MeasurementLines | null>;
 /** Detect full body landmarks for per-field measurement guides.
  *  Accepts a URL string OR an already-loaded HTMLImageElement to avoid CORS issues. */
-export declare function detectBodyLandmarks(imageSrc: string | HTMLImageElement): Promise<BodyLandmarks | null>;
+export declare function detectBodyLandmarks(imageSrc: string | HTMLImageElement): Promise<BodyLandmarksWithDims | null>;

package/dist/react/index.js

@@ -121,7 +121,9 @@ async function detectBodyLandmarks(imageSrc) {
       rightKnee: { x: lm[RIGHT_KNEE].x, y: lm[RIGHT_KNEE].y },
       leftAnkle: { x: lm[LEFT_ANKLE].x, y: lm[LEFT_ANKLE].y },
       rightAnkle: { x: lm[RIGHT_ANKLE].x, y: lm[RIGHT_ANKLE].y },
-      nose: { x: lm[NOSE].x, y: lm[NOSE].y }
+      nose: { x: lm[NOSE].x, y: lm[NOSE].y },
+      imageWidth: img.naturalWidth || img.width,
+      imageHeight: img.naturalHeight || img.height
     };
   } catch (err) {
     console.error("[PS-SDK] Body landmark detection failed:", err);
@@ -7760,36 +7762,57 @@ function FaceOverlay({
     ] }, key))
   ] });
 }
-function AccessoryStageCycler({
+function StageCycler({
   category,
   sizingDone,
+  tryOnProcessing,
+  tryOnDone,
   t
 }) {
-  const stages = category === "head" ? [
+  const sizingStages = category === "head" ? [
     { title: t("DETECTING HEAD"), desc: t("Reading head landmarks from your photo.") },
     { title: t("MAPPING CIRCUMFERENCE"), desc: t("Estimating head width and depth.") },
     { title: t("MATCHING HAT SIZE"), desc: t("Comparing your circumference to the size chart.") },
     { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation.") }
-  ] : [
+  ] : category === "face" ? [
     { title: t("DETECTING FACE"), desc: t("Identifying 478 face landmarks in your photo.") },
     { title: t("CALIBRATING SCALE"), desc: t("Using iris size as the pixel-to-mm anchor.") },
     { title: t("MEASURING FRAME"), desc: t("Mapping bridge, lens width and temple length.") },
     { title: t("MATCHING FRAME SIZE"), desc: t("Comparing your measurements to the size chart.") },
     { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation.") }
+  ] : [
+    // Body + foot fall through here — broadest set of stages so long
+    // Gemini estimates still have fresh text to cycle through.
+    { title: t("DETECTING POSE"), desc: t("Identifying body landmarks from your photo.") },
+    { title: t("SCANNING FRAME"), desc: t("Our AI is mapping your proportions.") },
+    { title: t("ANALYZING BODY"), desc: t("Measuring shoulders, chest, waist and hips.") },
+    { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the size guide.") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation.") }
+  ];
+  const tryOnStages = [
+    { title: t("GENERATING TRY-ON"), desc: t("Rendering the garment on your photo.") },
+    { title: t("REFINING DETAILS"), desc: t("Fine-tuning fit, drape and shadows.") },
+    { title: t("ALMOST THERE"), desc: t("Final compositing in progress.") },
+    { title: t("FINISHING TOUCHES"), desc: t("Polishing the result.") }
   ];
+  const active = tryOnProcessing ? tryOnStages : sizingStages;
+  const isDone = tryOnProcessing ? !!tryOnDone : sizingDone;
   const [idx, setIdx] = useState(0);
   useEffect(() => {
-    if (sizingDone) return;
+    setIdx(0);
+  }, [tryOnProcessing]);
+  useEffect(() => {
+    if (isDone) return;
     const id = setInterval(() => {
-      setIdx((i) => Math.min(i + 1, stages.length - 1));
+      setIdx((i) => Math.min(i + 1, active.length - 1));
     }, 900);
     return () => clearInterval(id);
-  }, [sizingDone, stages.length]);
-  const current = stages[idx] ?? stages[0];
+  }, [isDone, active.length]);
+  const current = active[idx] ?? active[0];
   return /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", style: { alignSelf: "center", marginTop: "auto", marginBottom: "auto" }, children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
     /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
     /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-  ] }, idx) });
+  ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`) });
 }
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W = imgWidth;
@@ -8025,7 +8048,8 @@ function SectionDetailView({
   tryOnProcessing,
   backLabel,
   internationalSizes,
-  continueLabel
+  continueLabel,
+  renderRaw = false
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = useState(null);
@@ -8143,6 +8167,18 @@ function SectionDetailView({
     return { range: val, ...parsed };
   }, [section, sizeColIdx, sizeHeader, unitLbl, columnUnits]);
   const fitRows = useMemo(() => {
+    if (renderRaw) {
+      const raw = sectionResult?.matchDetails || [];
+      return raw.map((m) => ({
+        area: m.measurement.replace(/\s*\(.*?\)\s*$/, "").trim() || m.measurement,
+        rawUserValue: m.userValue,
+        rawChartRange: m.chartRange,
+        fit: m.fit,
+        userNum: 0,
+        chartLabel: "",
+        isLength: false
+      }));
+    }
     const mainDetails = sectionResult?.matchDetails || [];
     const lengthDetails = lengthEntry?.secResult?.matchDetails || [];
     const details = [...mainDetails, ...lengthDetails];
@@ -8212,11 +8248,12 @@ function SectionDetailView({
       }
       return { area: m.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: false };
     });
-  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength]);
+  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength, renderRaw]);
   const goodCount = fitRows.filter(
     (r) => r.fit === "good" || r.fit === "a-bit-tight" || r.fit === "a-bit-loose"
   ).length;
   const matchPercent = fitRows.length > 0 ? Math.round(goodCount / fitRows.length * 100) : 0;
+  const showMatchPercent = !renderRaw;
   const secAny = sectionResult;
   const backendSize = secAny?.size || recSize;
   const backendLength = secAny?.length || recLength;
@@ -8343,7 +8380,10 @@ function SectionDetailView({
             borderRadius: "8px",
             padding: "4px 12px"
           }, children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: displaySizeLabel }),
+            /* @__PURE__ */ jsxs("span", { className: "ps-msd-card-size", children: [
+              displaySizeLabel,
+              !selectedCountry && finalDisplayLength ? ` / ${finalDisplayLength}` : ""
+            ] }),
             finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength }),
             selectedCountry && isRecommended && /* @__PURE__ */ jsxs("span", { className: "ps-msd-card-size-meta", style: { fontSize: "11px", opacity: 0.7 }, children: [
               "(",
@@ -8380,7 +8420,7 @@ function SectionDetailView({
             /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cells", children: [
               /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell", children: [
                 /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("USER") }),
-                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell ps-right", children: [
                 /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-label", children: [
@@ -8388,7 +8428,7 @@ function SectionDetailView({
                   " ",
                   displaySize
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: dLabel(row.chartLabel) })
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) })
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: `ps-msd-row-badge ${fitClass}`, children: [
@@ -8487,7 +8527,7 @@ function SectionDetailView({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
+      showMatchPercent && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
         /* @__PURE__ */ jsxs("svg", { width: "1vw", height: "1vw", viewBox: "0 0 16 16", fill: "none", children: [
           /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "var(--ps-accent)" }),
           /* @__PURE__ */ jsx("path", { d: "M4.5 8L7 10.5L11.5 5.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -8510,8 +8550,8 @@ function SectionDetailView({
           const fitBg = row.fit === "good" ? "rgba(33,84,239,0.08)" : row.fit.includes("tight") ? "rgba(220,38,38,0.08)" : "rgba(217,119,6,0.08)";
           return /* @__PURE__ */ jsxs("tr", { style: { borderBottom: i < fitRows.length - 1 ? "1px solid rgba(0,0,0,0.04)" : "none" }, children: [
             /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", fontWeight: 500, color: "var(--ps-text-primary)" }, children: row.area }),
-            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
-            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: dLabel(row.chartLabel) }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) }),
             /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", textAlign: "right" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", fontWeight: 600, color: fitColor, background: fitBg, borderRadius: "1vw", padding: "0.15vw 0.5vw", whiteSpace: "nowrap" }, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitLabelFn(row.fit, t) }) })
           ] }, i);
         }) })
@@ -8776,7 +8816,6 @@ function SizeResultView({
   const [poseLines, setPoseLines] = useState(null);
   const [poseReady, setPoseReady] = useState(false);
   const [imgDims, setImgDims] = useState({ w: 800, h: 1200 });
-  const analyzingDone = estimationDone;
   const handleImgLoad = useCallback((e) => {
     const el = e.currentTarget;
     if (el.naturalWidth && el.naturalHeight) {
@@ -8958,31 +8997,17 @@ function SizeResultView({
       ] }),
       (() => {
         const isFaceCategory = measurementType === "face" || measurementType === "head";
-        const detectionDone = isFaceCategory ? !!faceLandmarks : !!bodyLandmarks;
-        const detectLabel = isFaceCategory ? measurementType === "head" ? t("Detecting head") : t("Detecting face") : t("Detecting body pose");
-        if (isFaceCategory) {
-          return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(AccessoryStageCycler, { category: measurementType, sizingDone, t }) });
-        }
-        return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
-          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${detectionDone ? " ps-done" : " ps-active"}`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: detectionDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-            /* @__PURE__ */ jsx("span", { children: detectLabel })
-          ] }),
-          !sizingDone && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : detectionDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !detectionDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
-              /* @__PURE__ */ jsx("span", { children: t("Analyzing your size") })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-              /* @__PURE__ */ jsx("span", { children: t("Finding best fit for you") })
-            ] })
-          ] }),
-          tryOnProcessing && /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-            /* @__PURE__ */ jsx("span", { children: t("Generating virtual try-on") })
-          ] })
-        ] });
+        isFaceCategory ? measurementType === "head" ? t("Detecting head") : t("Detecting face") : t("Detecting body pose");
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+          StageCycler,
+          {
+            category: isFaceCategory ? measurementType : "body",
+            sizingDone,
+            tryOnProcessing,
+            tryOnDone,
+            t
+          }
+        ) });
       })()
     ] }),
     (allDone || sizingResult && !isSnapProcessing) && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -9255,6 +9280,7 @@ function SizeResultView({
                 productImage: resultImageUrl || productImage,
                 productTitle,
                 isMobile: true,
+                renderRaw: isAccessory,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
                 onToggleLines: () => setShowLines(!showLines),
@@ -9298,7 +9324,8 @@ function SizeResultView({
                 onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
-                t
+                t,
+                renderRaw: isAccessory
               }
             ) }, "panel-single")
           ] });
@@ -13030,6 +13057,7 @@ function FootSizeView(props) {
     {
       title: "Shoe Size",
       fields,
+      disablePhotoUpload: true,
       ...rest
     }
   );

package/dist/storefront/primestyle-tryon.js

@@ -9583,7 +9583,9 @@ async function detectBodyLandmarks(imageSrc) {
       rightKnee: { x: lm[RIGHT_KNEE].x, y: lm[RIGHT_KNEE].y },
       leftAnkle: { x: lm[LEFT_ANKLE].x, y: lm[LEFT_ANKLE].y },
       rightAnkle: { x: lm[RIGHT_ANKLE].x, y: lm[RIGHT_ANKLE].y },
-      nose: { x: lm[NOSE].x, y: lm[NOSE].y }
+      nose: { x: lm[NOSE].x, y: lm[NOSE].y },
+      imageWidth: img.naturalWidth || img.width,
+      imageHeight: img.naturalHeight || img.height
     };
   } catch (err) {
     console.error("[PS-SDK] Body landmark detection failed:", err);
@@ -17184,36 +17186,57 @@ function FaceOverlay({
     ] }, key))
   ] });
 }
-function AccessoryStageCycler({
+function StageCycler({
   category,
   sizingDone,
+  tryOnProcessing,
+  tryOnDone,
   t: t2
 }) {
-  const stages = category === "head" ? [
+  const sizingStages = category === "head" ? [
     { title: t2("DETECTING HEAD"), desc: t2("Reading head landmarks from your photo.") },
     { title: t2("MAPPING CIRCUMFERENCE"), desc: t2("Estimating head width and depth.") },
     { title: t2("MATCHING HAT SIZE"), desc: t2("Comparing your circumference to the size chart.") },
     { title: t2("FINALIZING RESULT"), desc: t2("Almost done — preparing your recommendation.") }
-  ] : [
+  ] : category === "face" ? [
     { title: t2("DETECTING FACE"), desc: t2("Identifying 478 face landmarks in your photo.") },
     { title: t2("CALIBRATING SCALE"), desc: t2("Using iris size as the pixel-to-mm anchor.") },
     { title: t2("MEASURING FRAME"), desc: t2("Mapping bridge, lens width and temple length.") },
     { title: t2("MATCHING FRAME SIZE"), desc: t2("Comparing your measurements to the size chart.") },
     { title: t2("FINALIZING RESULT"), desc: t2("Almost done — preparing your recommendation.") }
+  ] : [
+    // Body + foot fall through here — broadest set of stages so long
+    // Gemini estimates still have fresh text to cycle through.
+    { title: t2("DETECTING POSE"), desc: t2("Identifying body landmarks from your photo.") },
+    { title: t2("SCANNING FRAME"), desc: t2("Our AI is mapping your proportions.") },
+    { title: t2("ANALYZING BODY"), desc: t2("Measuring shoulders, chest, waist and hips.") },
+    { title: t2("MATCHING SIZE"), desc: t2("Comparing your measurements to the size guide.") },
+    { title: t2("FINALIZING RESULT"), desc: t2("Almost done — preparing your recommendation.") }
+  ];
+  const tryOnStages = [
+    { title: t2("GENERATING TRY-ON"), desc: t2("Rendering the garment on your photo.") },
+    { title: t2("REFINING DETAILS"), desc: t2("Fine-tuning fit, drape and shadows.") },
+    { title: t2("ALMOST THERE"), desc: t2("Final compositing in progress.") },
+    { title: t2("FINISHING TOUCHES"), desc: t2("Polishing the result.") }
   ];
+  const active = tryOnProcessing ? tryOnStages : sizingStages;
+  const isDone = tryOnProcessing ? !!tryOnDone : sizingDone;
   const [idx, setIdx] = reactExports.useState(0);
   reactExports.useEffect(() => {
-    if (sizingDone) return;
+    setIdx(0);
+  }, [tryOnProcessing]);
+  reactExports.useEffect(() => {
+    if (isDone) return;
     const id2 = setInterval(() => {
-      setIdx((i) => Math.min(i + 1, stages.length - 1));
+      setIdx((i) => Math.min(i + 1, active.length - 1));
     }, 900);
     return () => clearInterval(id2);
-  }, [sizingDone, stages.length]);
-  const current = stages[idx] ?? stages[0];
+  }, [isDone, active.length]);
+  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 })
-  ] }, idx) });
+  ] }, `${tryOnProcessing ? "t" : "s"}-${idx}`) });
 }
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W2 = imgWidth;
@@ -17449,7 +17472,8 @@ function SectionDetailView({
   tryOnProcessing,
   backLabel,
   internationalSizes,
-  continueLabel
+  continueLabel,
+  renderRaw = false
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = reactExports.useState(null);
@@ -17567,6 +17591,18 @@ function SectionDetailView({
     return { range: val, ...parsed };
   }, [section, sizeColIdx, sizeHeader, unitLbl, columnUnits]);
   const fitRows = reactExports.useMemo(() => {
+    if (renderRaw) {
+      const raw = sectionResult?.matchDetails || [];
+      return raw.map((m2) => ({
+        area: m2.measurement.replace(/\s*\(.*?\)\s*$/, "").trim() || m2.measurement,
+        rawUserValue: m2.userValue,
+        rawChartRange: m2.chartRange,
+        fit: m2.fit,
+        userNum: 0,
+        chartLabel: "",
+        isLength: false
+      }));
+    }
     const mainDetails = sectionResult?.matchDetails || [];
     const lengthDetails = lengthEntry?.secResult?.matchDetails || [];
     const details = [...mainDetails, ...lengthDetails];
@@ -17636,11 +17672,12 @@ function SectionDetailView({
       }
       return { area: m2.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: false };
     });
-  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength]);
+  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength, renderRaw]);
   const goodCount = fitRows.filter(
     (r2) => r2.fit === "good" || r2.fit === "a-bit-tight" || r2.fit === "a-bit-loose"
   ).length;
   const matchPercent = fitRows.length > 0 ? Math.round(goodCount / fitRows.length * 100) : 0;
+  const showMatchPercent = !renderRaw;
   const secAny = sectionResult;
   const backendSize = secAny?.size || recSize;
   const backendLength = secAny?.length || recLength;
@@ -17767,7 +17804,10 @@ function SectionDetailView({
             borderRadius: "8px",
             padding: "4px 12px"
           }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-card-size", children: displaySizeLabel }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-card-size", children: [
+              displaySizeLabel,
+              !selectedCountry && finalDisplayLength ? ` / ${finalDisplayLength}` : ""
+            ] }),
             finalDisplayLength && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength }),
             selectedCountry && isRecommended && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-card-size-meta", style: { fontSize: "11px", opacity: 0.7 }, children: [
               "(",
@@ -17804,7 +17844,7 @@ function SectionDetailView({
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msd-row-cells", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msd-row-cell", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-label", children: t2("USER") }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msd-row-cell ps-right", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-cell-label", children: [
@@ -17812,7 +17852,7 @@ function SectionDetailView({
                   " ",
                   displaySize
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: dLabel(row.chartLabel) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) })
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-msd-row-badge ${fitClass}`, children: [
@@ -17911,7 +17951,7 @@ function SectionDetailView({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
+      showMatchPercent && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "1vw", height: "1vw", viewBox: "0 0 16 16", fill: "none", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "var(--ps-accent)" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4.5 8L7 10.5L11.5 5.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -17934,8 +17974,8 @@ function SectionDetailView({
           const fitBg = row.fit === "good" ? "rgba(33,84,239,0.08)" : row.fit.includes("tight") ? "rgba(220,38,38,0.08)" : "rgba(217,119,6,0.08)";
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { style: { borderBottom: i < fitRows.length - 1 ? "1px solid rgba(0,0,0,0.04)" : "none" }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", fontWeight: 500, color: "var(--ps-text-primary)" }, children: row.area }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: dLabel(row.chartLabel) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", textAlign: "right" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", fontWeight: 600, color: fitColor, background: fitBg, borderRadius: "1vw", padding: "0.15vw 0.5vw", whiteSpace: "nowrap" }, children: row.isLength ? lengthFitLabelFn(row.fit, t2) : fitLabelFn(row.fit, t2) }) })
           ] }, i);
         }) })
@@ -18200,7 +18240,6 @@ function SizeResultView({
   const [poseLines, setPoseLines] = reactExports.useState(null);
   const [poseReady, setPoseReady] = reactExports.useState(false);
   const [imgDims, setImgDims] = reactExports.useState({ w: 800, h: 1200 });
-  const analyzingDone = estimationDone;
   const handleImgLoad = reactExports.useCallback((e) => {
     const el2 = e.currentTarget;
     if (el2.naturalWidth && el2.naturalHeight) {
@@ -18382,31 +18421,17 @@ function SizeResultView({
       ] }),
       (() => {
         const isFaceCategory = measurementType === "face" || measurementType === "head";
-        const detectionDone = isFaceCategory ? !!faceLandmarks : !!bodyLandmarks;
-        const detectLabel = isFaceCategory ? measurementType === "head" ? t2("Detecting head") : t2("Detecting face") : t2("Detecting body pose");
-        if (isFaceCategory) {
-          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AccessoryStageCycler, { category: measurementType, sizingDone, t: t2 }) });
-        }
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${detectionDone ? " ps-done" : " ps-active"}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: detectionDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: detectLabel })
-          ] }),
-          !sizingDone && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : detectionDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !detectionDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Analyzing your size") })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Finding best fit for you") })
-            ] })
-          ] }),
-          tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Generating virtual try-on") })
-          ] })
-        ] });
+        isFaceCategory ? measurementType === "head" ? t2("Detecting head") : t2("Detecting face") : t2("Detecting body pose");
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          StageCycler,
+          {
+            category: isFaceCategory ? measurementType : "body",
+            sizingDone,
+            tryOnProcessing,
+            tryOnDone,
+            t: t2
+          }
+        ) });
       })()
     ] }),
     (allDone || sizingResult && !isSnapProcessing) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -18679,6 +18704,7 @@ function SizeResultView({
                 productImage: resultImageUrl || productImage,
                 productTitle,
                 isMobile: true,
+                renderRaw: isAccessory,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
                 onToggleLines: () => setShowLines(!showLines),
@@ -18722,7 +18748,8 @@ function SizeResultView({
                 onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
-                t: t2
+                t: t2,
+                renderRaw: isAccessory
               }
             ) }, "panel-single")
           ] });
@@ -22454,6 +22481,7 @@ function FootSizeView(props) {
     {
       title: "Shoe Size",
       fields,
+      disablePhotoUpload: true,
       ...rest
     }
   );

package/package.json

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