@primestyleai/tryon 5.5.23 → 5.5.24

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;
@@ -5400,7 +5398,9 @@ function SectionDetailView({
     });
   }, [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;
@@ -5409,6 +5409,21 @@ function SectionDetailView({
   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) => {
@@ -5503,9 +5518,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 +5534,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",
@@ -5585,7 +5600,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 +5608,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 +5634,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.24",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",