@primestyleai/tryon 5.1.0 → 5.2.0

package/dist/react/index.js

@@ -4177,7 +4177,14 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
     const width = x2 - x1;
     const curveDepth = width * 0.06;
     const midX = (x1 + x2) / 2;
-    const fitRow = fitRows.find((r) => r.area.toLowerCase() === key);
+    const fitRow = fitRows.find((r) => {
+      const a = r.area.toLowerCase().trim();
+      if (a === key) return true;
+      if (key === "chest" && (a.includes("bust") || a.includes("chest"))) return true;
+      if (key === "waist" && a.includes("waist")) return true;
+      if (key === "hips" && (a.includes("hip") || a === "hips")) return true;
+      return false;
+    });
     const color = fitRow ? fitColor(fitRow.fit) : "#2154EF";
     const delay = i * 0.35;
     const curvePath = `M ${x1} ${cy} Q ${midX} ${cy + curveDepth} ${x2} ${cy}`;
@@ -4273,6 +4280,7 @@ const cellValFn = (row, colIdx, header) => {
   return "";
 };
 const fitLabelFn = (fit, t) => fit === "good" ? t("perfect fit") : fit === "too-tight" ? t("too tight") : fit === "tight" ? t("tight") : fit === "a-bit-tight" ? t("a bit tight") : fit === "too-loose" ? t("too loose") : fit === "loose" ? t("loose") : t("a bit loose");
+const lengthFitLabelFn = (fit, t) => fit === "good" ? t("perfect fit") : fit === "too-tight" ? t("too short") : fit === "tight" ? t("short") : fit === "a-bit-tight" ? t("a bit short") : fit === "too-loose" ? t("too long") : fit === "loose" ? t("long") : t("a bit long");
 const isLengthSection = (name) => /length|lunghezza|longueur|länge|largo/i.test(name);
 function findLengthForSection(sectionName, lengthEntries) {
   const base = sectionName.toLowerCase().replace(/\s*(size|sizing|—.*|–.*|\(.*?\))\s*/gi, "").trim();
@@ -4390,19 +4398,19 @@ function SectionDetailView({
             if (rMin2 > 0 && rMax2 > 0) {
               const range2 = rMax2 - rMin2;
               const threshold2 = range2 > 0 ? range2 * 0.5 : rMin2 * 0.05 || 3;
-              const tol2 = Math.max((rMax2 || rMin2) * 0.03, 0.5);
+              const tol2 = Math.max((rMax2 || rMin2) * 5e-3, 0.25);
               if (userNum2 >= rMin2 - tol2 && userNum2 <= rMax2 + tol2) fit2 = "good";
               else if (userNum2 < rMin2) {
                 const diff = rMin2 - userNum2;
-                fit2 = diff > threshold2 * 2 ? "too-loose" : diff > threshold2 ? "loose" : "a-bit-loose";
+                fit2 = diff > threshold2 * 2 ? "too-tight" : diff > threshold2 ? "tight" : "a-bit-tight";
               } else {
                 const diff = userNum2 - rMax2;
-                fit2 = diff > threshold2 * 2 ? "too-tight" : diff > threshold2 ? "tight" : "a-bit-tight";
+                fit2 = diff > threshold2 * 2 ? "too-loose" : diff > threshold2 ? "loose" : "a-bit-loose";
               }
             }
           }
         }
-        return { area: m.measurement + " (" + activeLength + ")", userNum: userNum2, chartLabel: cleanNumFn(chartLabel2), fit: fit2 };
+        return { area: m.measurement + " (" + activeLength + ")", userNum: userNum2, chartLabel: cleanNumFn(chartLabel2), fit: fit2, isLength: true };
       }
       const userNum = userMeasurements[m.measurement.toLowerCase()] || pNumFn(m.userValue);
       let { min: rMin, max: rMax } = pRangeFn(m.chartRange);
@@ -4418,7 +4426,7 @@ function SectionDetailView({
       const range = rMax - rMin;
       const threshold = range > 0 ? range * 0.5 : rMin * 0.05 || 3;
       let fit;
-      const tol = Math.max((rMax || rMin) * 0.03, 0.5);
+      const tol = Math.max((rMax || rMin) * 5e-3, 0.25);
       if (userNum >= rMin - tol && userNum <= rMax + tol) fit = "good";
       else if (userNum < rMin) {
         const diff = rMin - userNum;
@@ -4427,10 +4435,15 @@ function SectionDetailView({
         const diff = userNum - rMax;
         fit = diff > threshold * 2 ? "too-tight" : diff > threshold ? "tight" : "a-bit-tight";
       }
-      return { area: m.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit };
+      return { area: m.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: false };
     });
   }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength]);
   return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-detail", children: [
+    /* @__PURE__ */ jsx("div", { style: { marginBottom: "0.3vw" }, children: /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: onBack, type: "button", children: [
+      /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
+      " ",
+      t("Back to sections")
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-detail-header", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-sec-detail-icon", children: /* @__PURE__ */ jsx(GarmentIcon, { name: sectionName, size: 28 }) }),
       /* @__PURE__ */ jsx("span", { className: "ps-tryon-sec-detail-name", children: sectionName })
@@ -4460,7 +4473,7 @@ function SectionDetailView({
           unitLbl
         ] }),
         /* @__PURE__ */ jsx("td", { className: "ps-tryon-sr-ft-garment", children: row.chartLabel }),
-        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fit-status ps-fit-${row.fit}`, children: fitLabelFn(row.fit, t) }) })
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fit-status ps-fit-${row.fit}`, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitLabelFn(row.fit, t) }) })
       ] }, i)) })
     ] }),
     allSizes.length > 1 && (() => {
@@ -4633,15 +4646,21 @@ function SizeResultView({
   const allSectionEntries = useMemo(() => {
     if (!isMultiSection || !sizeGuide?.sections) return [];
     return Object.entries(sizeGuide.sections).map(([name, section]) => {
-      const secResult = sizingResult?.sections?.[name] || (() => {
-        if (!sizingResult?.matchDetails?.length) return { recommendedSize: sizingResult?.recommendedSize || "", matchDetails: [] };
-        const secHeaderKeys = new Set(section.requiredFields.map((f) => f.key.toLowerCase()));
-        const secHeaderLabels = new Set(section.headers.map((h) => h.toLowerCase().replace(/\s*\(.*?\)\s*/g, "").trim()));
-        const relevantDetails = sizingResult.matchDetails.filter((m) => {
-          const mLower = m.measurement.toLowerCase();
-          return secHeaderKeys.has(mLower) || secHeaderLabels.has(mLower);
-        });
-        return { recommendedSize: sizingResult.recommendedSize, matchDetails: relevantDetails };
+      const secResult = (() => {
+        const fromSections = sizingResult?.sections?.[name];
+        if (fromSections?.matchDetails?.length) return fromSections;
+        if (sizingResult?.matchDetails?.length) {
+          const secHeaderKeys = new Set(section.requiredFields.map((f) => f.key.toLowerCase()));
+          const secHeaderLabels = new Set(section.headers.map((h) => h.toLowerCase().replace(/\s*\(.*?\)\s*/g, "").trim()));
+          const relevantDetails = sizingResult.matchDetails.filter((m) => {
+            const mLower = m.measurement.toLowerCase();
+            return secHeaderKeys.has(mLower) || secHeaderLabels.has(mLower);
+          });
+          if (relevantDetails.length) {
+            return { recommendedSize: fromSections?.recommendedSize || sizingResult.recommendedSize, matchDetails: relevantDetails };
+          }
+        }
+        return fromSections || { recommendedSize: sizingResult?.recommendedSize || "", matchDetails: [] };
       })();
       const userMeasurements = {};
       if (sizingResult?.matchDetails) {
@@ -5059,6 +5078,13 @@ function SizeResultView({
                 /* @__PURE__ */ jsx("br", {}),
                 t("Don't apply filters or edits")
               ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { background: "rgba(59,130,246,0.08)", border: "1px solid rgba(59,130,246,0.2)", borderRadius: "0.5vw", padding: "0.5vw 0.8vw" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.2vw" }, children: [
+                /* @__PURE__ */ jsx(SparkleIcon, { size: 12 }),
+                /* @__PURE__ */ jsx("span", { style: { color: "var(--ps-accent)", fontSize: "0.65vw", fontWeight: 700 }, children: t("Pro Tip") })
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: t("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
             ] })
           ] })
         ] }),

package/package.json

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