@primestyleai/tryon 5.5.23 → 5.5.25

package/dist/react/index.js

@@ -5376,18 +5376,16 @@ function SectionDetailView({
       const userNum = userMeasurements[m.measurement.toLowerCase()] || pNumFn(m.userValue);
       let { min: rMin, max: rMax } = pRangeFn(m.chartRange);
       let chartLabel = m.chartRange;
-      if (displaySize !== recSize) {
-        const alt = chartRangeFor(m.measurement, displaySize);
-        if (alt) {
-          chartLabel = alt.range;
-          rMin = alt.min;
-          rMax = alt.max;
-        }
+      const alt = chartRangeFor(m.measurement, displaySize);
+      if (alt) {
+        chartLabel = alt.range;
+        rMin = alt.min;
+        rMax = alt.max;
       }
       const range = rMax - rMin;
       const threshold = range > 0 ? range * 0.5 : rMin * 0.05 || 3;
       let fit;
-      const tol = Math.max((rMax || rMin) * 5e-3, 0.25);
+      const tol = Math.max((rMax || rMin) * 0.03, 0.5);
       if (userNum >= rMin - tol && userNum <= rMax + tol) fit = "good";
       else if (userNum < rMin) {
         const diff = rMin - userNum;
@@ -5399,16 +5397,32 @@ function SectionDetailView({
       return { area: m.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: false };
     });
   }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength]);
-  const displayLength = selectedLength || recLength;
-  const goodCount = fitRows.filter((r) => r.fit === "good").length;
+  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 secAny = sectionResult;
-  const backendLength = secAny?.length || displayLength;
-  const backendSize = secAny?.size || displaySize;
+  const backendSize = secAny?.size || recSize;
+  const backendLength = secAny?.length || recLength;
   const backendAvailableSizes = secAny?.availableSizes || [];
   const backendAvailableLengths = secAny?.availableLengths || [];
   const finalDisplayLength = selectedLength || backendLength;
   const finalAllSizes = backendAvailableSizes.length > 0 ? backendAvailableSizes : allSizes;
+  const visibleSizes = (() => {
+    if (finalAllSizes.length <= 3) return finalAllSizes;
+    const idx = finalAllSizes.indexOf(recSize);
+    if (idx < 0) return finalAllSizes.slice(0, 3);
+    const start = Math.max(0, Math.min(finalAllSizes.length - 3, idx - 1));
+    return finalAllSizes.slice(start, start + 3);
+  })();
+  const lengthOptions = backendAvailableLengths.length > 0 ? backendAvailableLengths : lengthSizes;
+  const visibleLengths = (() => {
+    if (lengthOptions.length <= 3) return lengthOptions;
+    const idx = lengthOptions.indexOf(backendLength);
+    if (idx < 0) return lengthOptions.slice(0, 3);
+    const start = Math.max(0, Math.min(lengthOptions.length - 3, idx - 1));
+    return lengthOptions.slice(start, start + 3);
+  })();
   if (isMobileProp) {
     const cleanSectionName = sectionName.replace(/\s*[—–-]\s*.*/g, "");
     const measurementDesc = (area) => {
@@ -5448,9 +5462,9 @@ function SectionDetailView({
       ] }),
       productImage && /* @__PURE__ */ jsx("div", { className: "ps-msd-image", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle || "", className: "ps-msd-image-img" }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-msd-card", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: t("RECOMMENDED SIZE") }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: displaySize === backendSize ? t("RECOMMENDED SIZE") : t("TRYING SIZE") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-msd-card-size-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: backendSize }),
+          /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: displaySize }),
           finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "ps-msd-card-divider" }),
@@ -5491,7 +5505,7 @@ function SectionDetailView({
                 /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-label", children: [
                   t("SIZE"),
                   " ",
-                  backendSize
+                  displaySize
                 ] }),
                 /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: row.chartLabel })
               ] })
@@ -5503,9 +5517,9 @@ function SectionDetailView({
           ] }, i);
         }) })
       ] }),
-      finalAllSizes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
+      visibleSizes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-sizes-label", children: t("TRY ANOTHER SIZE") }),
-        /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: finalAllSizes.map((s) => {
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: visibleSizes.map((s) => {
           const isActive = s === displaySize;
           return /* @__PURE__ */ jsx(
             "button",
@@ -5519,9 +5533,9 @@ function SectionDetailView({
           );
         }) })
       ] }),
-      (backendAvailableLengths.length > 0 || lengthSizes.length > 0) && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
+      visibleLengths.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-sizes-label", children: t("LENGTH ADJUSTMENT") }),
-        /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: (backendAvailableLengths.length > 0 ? backendAvailableLengths : lengthSizes).map((s) => {
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: visibleLengths.map((s) => {
           const isActive = finalDisplayLength === s;
           return /* @__PURE__ */ jsx(
             "button",
@@ -5539,7 +5553,7 @@ function SectionDetailView({
         t("*Our sizing engine recommends"),
         " ",
         backendSize,
-        finalDisplayLength ? ` (${finalDisplayLength})` : "",
+        backendLength ? ` (${backendLength})` : "",
         " ",
         t("based on your measurements and the garment's tailoring chart.")
       ] })
@@ -5549,7 +5563,7 @@ function SectionDetailView({
     /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75vw", fontWeight: 700, color: "var(--ps-accent)", textTransform: "uppercase", letterSpacing: "0.12em" }, children: isRecommended ? t("Recommended Size") : t("Not Recommended") }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.5vw", marginTop: "0.3vw", marginBottom: "0.4vw" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "3.5vw", fontWeight: 300, color: "var(--ps-text-primary)", lineHeight: 1, letterSpacing: "-0.02em" }, children: backendSize }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: "3.5vw", fontWeight: 300, color: "var(--ps-text-primary)", lineHeight: 1, letterSpacing: "-0.02em" }, children: displaySize }),
         finalDisplayLength && /* @__PURE__ */ jsx("span", { style: { fontSize: "1.4vw", fontWeight: 400, color: "var(--ps-text-secondary)" }, children: finalDisplayLength })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
@@ -5585,7 +5599,7 @@ function SectionDetailView({
           ] }, i);
         }) })
       ] }) }),
-      finalAllSizes.length > 1 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.8vw" }, children: [
+      visibleSizes.length > 1 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.8vw" }, children: [
         /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.6vw", fontWeight: 700, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.1em", display: "block", marginBottom: "0.4vw" }, children: [
           t("Select"),
           " ",
@@ -5593,7 +5607,7 @@ function SectionDetailView({
           " ",
           t("Size")
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.3vw", flexWrap: "wrap" }, children: finalAllSizes.map((s) => {
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.3vw", flexWrap: "wrap" }, children: visibleSizes.map((s) => {
           const isActive = s === displaySize;
           return /* @__PURE__ */ jsx(
             "button",
@@ -5619,9 +5633,9 @@ function SectionDetailView({
           );
         }) })
       ] }),
-      (backendAvailableLengths.length > 0 || lengthSizes.length > 0) && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.8vw", marginTop: "0.4vw" }, children: [
+      visibleLengths.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.8vw", marginTop: "0.4vw" }, children: [
         /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", fontWeight: 700, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.1em", display: "block", marginBottom: "0.4vw" }, children: t("Length Adjustment") }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.3vw", flexWrap: "wrap" }, children: (backendAvailableLengths.length > 0 ? backendAvailableLengths : lengthSizes).map((s) => {
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.3vw", flexWrap: "wrap" }, children: visibleLengths.map((s) => {
           const isActive = finalDisplayLength === s;
           return /* @__PURE__ */ jsx(
             "button",

package/package.json

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