@primestyleai/tryon 4.0.0 → 4.1.0

package/dist/react/index.js

@@ -1511,15 +1511,26 @@ function PrimeStyleTryonInner({
     const [editing, setEditing] = useState(false);
     const [editVals, setEditVals] = useState({});
     const [compareSize, setCompareSize] = useState("");
-    const recSize = sizingResult?.recommendedSize || "";
+    const cleanChart = (s) => s.replace(/\s*(cm|CM|in|IN|inches|mm|MM)\s*$/i, "").trim();
+    const recSize = useMemo(() => {
+      if (sizingResult?.recommendedSize) return sizingResult.recommendedSize;
+      if (sizeGuide?.rows && sizeGuide.headers) {
+        const sc = sizeGuide.headers.findIndex((h) => /size|taglia|größe|taille/i.test(h.trim()));
+        const idx = sc >= 0 ? sc : 0;
+        for (const row of sizeGuide.rows) {
+          const label = row[idx]?.trim();
+          if (label && /^(XXS|XS|S|M|L|XL|XXL|XXXL|\d{1,3})$/i.test(label)) return label;
+        }
+      }
+      return "";
+    }, [sizingResult, sizeGuide]);
     const selSize = compareSize || recSize;
     const sizeColIdx = useMemo(() => {
       if (!sizeGuide?.headers || !sizeGuide?.rows) return -1;
       const byName = sizeGuide.headers.findIndex((h) => /size|taglia|größe|taille/i.test(h.trim()));
       if (byName >= 0) return byName;
       for (let c = 0; c < sizeGuide.headers.length; c++) {
-        const vals = sizeGuide.rows.map((r) => r[c]?.trim() || "");
-        if (vals.some((v) => /^(XXS|XS|S|M|L|XL|XXL|XXXL|ONE SIZE|\d{1,2})$/i.test(v))) return c;
+        if (sizeGuide.rows.some((r) => /^(XXS|XS|S|M|L|XL|XXL|XXXL|ONE SIZE|\d{1,2})$/i.test(r[c]?.trim() || ""))) return c;
       }
       return 0;
     }, [sizeGuide]);
@@ -1553,7 +1564,7 @@ function PrimeStyleTryonInner({
         const userNum = edited !== void 0 && edited !== "" ? parseFloat(edited) : origNum;
         let { min: rMin, max: rMax } = pRange(m.chartRange);
         let chartLabel = m.chartRange;
-        if (compareSize && compareSize !== sizingResult.recommendedSize) {
+        if (compareSize && compareSize !== recSize) {
           const alt = chartRangeFor(m.measurement, compareSize);
           if (alt) {
             chartLabel = alt.range;
@@ -1562,9 +1573,9 @@ function PrimeStyleTryonInner({
           }
         }
         const fit = userNum >= rMin && userNum <= rMax ? "good" : userNum < rMin ? "tight" : "loose";
-        return { area: m.measurement, userNum, chartLabel, fit };
+        return { area: m.measurement, userNum, chartLabel: cleanChart(chartLabel), fit };
       });
-    }, [sizingResult, compareSize, editVals, chartRangeFor]);
+    }, [sizingResult, compareSize, editVals, chartRangeFor, recSize]);
     const suggestedSize = useMemo(() => {
       if (!Object.keys(editVals).length || !sizingResult?.matchDetails?.length || !allSizes.length) return null;
       let bestSize = "";
@@ -1590,6 +1601,7 @@ function PrimeStyleTryonInner({
       const fromTable = SIZE_CONVERSIONS[upper] || SIZE_CONVERSIONS[recSize] || {};
       return { ...fromTable, ...backendIntl };
     }, [sizingResult, recSize]);
+    const confLabel = sizingResult?.confidence === "high" ? t("High Confidence") : sizingResult?.confidence === "medium" ? t("Medium Confidence") : t("Low Confidence");
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr", children: [
       sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-loading", children: [
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
@@ -1597,13 +1609,15 @@ function PrimeStyleTryonInner({
       ] }),
       sizingResult && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero", children: [
-          recSize && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge", children: recSize }),
+          recSize ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge", children: recSize }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge ps-tryon-sr-hero-badge-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 22 }) }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero-info", children: [
             /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-title", children: t("Your Size") }),
-            /* @__PURE__ */ jsx("div", { className: `ps-tryon-sr-hero-conf ps-conf-${sizingResult.confidence}`, children: sizingResult.confidence === "high" ? t("High Confidence") : sizingResult.confidence === "medium" ? t("Medium Confidence") : t("Low Confidence") })
+            /* @__PURE__ */ jsx("div", { className: `ps-tryon-sr-hero-conf ps-conf-${sizingResult.confidence}`, children: confLabel })
           ] })
         ] }),
-        suggestedSize && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-suggestion", children: [
+        suggestedSize && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-suggestion", onClick: () => {
+          setCompareSize(suggestedSize);
+        }, children: [
           /* @__PURE__ */ jsx(SparkleIcon, { size: 14 }),
           /* @__PURE__ */ jsxs("span", { children: [
             t("Based on your updated measurements, size"),
@@ -1611,7 +1625,8 @@ function PrimeStyleTryonInner({
             /* @__PURE__ */ jsx("strong", { children: suggestedSize }),
             " ",
             t("may be a better fit")
-          ] })
+          ] }),
+          /* @__PURE__ */ jsx(ArrowRightIcon, {})
         ] }),
         Object.keys(allIntlSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-section-title", children: t("Your size in other countries") }),
@@ -1664,7 +1679,11 @@ function PrimeStyleTryonInner({
                   selSize,
                   ")"
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fc-value", children: row.chartLabel })
+                /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-value", children: [
+                  row.chartLabel,
+                  " ",
+                  unitLbl
+                ] })
               ] })
             ] })
           ] }, i)) })
@@ -2369,12 +2388,17 @@ const STYLES = `
   /* Suggestion banner */
   .ps-tryon-sr-suggestion {
     display: flex; align-items: center; gap: 0.52vw;
-    padding: 0.63vw 0.83vw; border-radius: 0.52vw;
-    background: rgba(187,148,92,0.08); border: 1px solid rgba(187,148,92,0.2);
-    font-size: 0.73vw; color: #d6ba7d; animation: ps-fade-up 0.3s ease both;
+    padding: 0.62vw 0.83vw; border-radius: 0.52vw;
+    background: linear-gradient(135deg, rgba(187,148,92,0.1), rgba(187,148,92,0.04));
+    border: 1px solid rgba(187,148,92,0.25);
+    font-size: 0.73vw; color: #d6ba7d; cursor: pointer;
+    animation: ps-fade-up 0.3s ease both; transition: background 0.2s;
   }
+  .ps-tryon-sr-suggestion:hover { background: rgba(187,148,92,0.14); }
   .ps-tryon-sr-suggestion svg { stroke: #bb945c; flex-shrink: 0; }
   .ps-tryon-sr-suggestion strong { color: #fff; }
+  .ps-tryon-sr-hero-badge-icon { background: linear-gradient(135deg, #333, #444); }
+  .ps-tryon-sr-hero-badge-icon svg { stroke: #bb945c; }
 
   /* Section titles */
   .ps-tryon-sr-section-title { font-size: 0.73vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.52vw; }

package/package.json

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