@primestyleai/tryon 5.4.3 → 5.4.4

package/dist/react/index.js

@@ -4020,7 +4020,6 @@ function SectionDetailView({
     return [...new Set(raw)];
   }, [section, sizeColIdx, sizeHeader]);
   const displaySize = selectedSize || recSize;
-  const isRecommended = displaySize === recSize;
   const chartRangeFor = useCallback((measurement, size) => {
     const b = measurement.toLowerCase().trim();
     const preferCm = unitLbl === "cm" || unitLbl === "";
@@ -4137,87 +4136,140 @@ function SectionDetailView({
       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 })
+  const displayLength = selectedLength || recLength;
+  const goodCount = fitRows.filter((r) => r.fit === "good").length;
+  const matchPercent = fitRows.length > 0 ? Math.round(goodCount / fitRows.length * 100) : 0;
+  return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-detail", style: { padding: "1vw" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: "0.55vw", fontWeight: 700, color: "var(--ps-accent)", textTransform: "uppercase", letterSpacing: "0.12em" }, children: t("Recommended Size") }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "0.4vw", marginTop: "0.2vw", marginBottom: "0.3vw" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "2.8vw", fontWeight: 300, color: "var(--ps-text-primary)", lineHeight: 1, letterSpacing: "-0.02em" }, children: displaySize }),
+      displayLength && /* @__PURE__ */ jsx("span", { style: { fontSize: "1.1vw", fontWeight: 400, color: "var(--ps-text-secondary)" }, children: displayLength })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.8vw" }, children: [
+      /* @__PURE__ */ jsxs("svg", { width: "0.8vw", height: "0.8vw", 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" })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-secondary)" }, children: [
+        matchPercent,
+        "% ",
+        t("Match based on your silhouette profile")
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-size-hero", children: (() => {
-      const overallFit = fitRows.length > 0 ? fitRows.every((r) => r.fit === "good") ? "good" : fitRows.some((r) => r.fit.includes("tight")) ? "tight" : "loose" : "good";
-      const fitLabel = overallFit === "good" ? t("Perfect Fit") : overallFit === "tight" ? t("Tight Fit") : t("Relaxed Fit");
-      const fitColor = overallFit === "good" ? "#16a34a" : overallFit === "tight" ? "#dc2626" : "#d97706";
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "0.65vw", fontWeight: 700, color: fitColor, textTransform: "uppercase", letterSpacing: "0.1em" }, children: fitLabel }),
-        /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-size-letter", children: displaySize }),
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-size-meta", children: /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-size-label${isRecommended ? "" : " ps-not-rec"}`, children: isRecommended ? t("RECOMMENDED SIZE") : t("NOT RECOMMENDED") }) })
-      ] });
-    })() }),
-    fitRows.length > 0 && /* @__PURE__ */ jsxs("table", { className: "ps-tryon-sr-fit-table", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", {}),
-        /* @__PURE__ */ jsx("th", { children: t("You") }),
-        /* @__PURE__ */ jsx("th", { children: t("Garment") }),
-        /* @__PURE__ */ jsx("th", { children: t("Your fit") })
+    fitRows.length > 0 && /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse", marginBottom: "0.8vw" }, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { borderBottom: "1px solid rgba(0,0,0,0.08)" }, children: [
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.3vw 0", fontSize: "0.5vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em" }, children: t("Measurement") }),
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.3vw 0", fontSize: "0.5vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em" }, children: t("Your Body") }),
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.3vw 0", fontSize: "0.5vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em" }, children: t("Garment Spec") }),
+        /* @__PURE__ */ jsx("th", { style: { textAlign: "right", padding: "0.3vw 0", fontSize: "0.5vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em" }, children: t("Fit Result") })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: fitRows.map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { className: "ps-tryon-sr-ft-area", children: row.area }),
-        /* @__PURE__ */ jsxs("td", { className: "ps-tryon-sr-ft-you", children: [
-          row.userNum,
-          " ",
-          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: row.isLength ? lengthFitLabelFn(row.fit, t) : fitLabelFn(row.fit, t) }) })
-      ] }, i)) })
+      /* @__PURE__ */ jsx("tbody", { children: fitRows.map((row, i) => {
+        const fitColor = row.fit === "good" ? "#2154EF" : row.fit.includes("tight") ? "#dc2626" : "#d97706";
+        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: "1px solid rgba(0,0,0,0.04)" }, children: [
+          /* @__PURE__ */ jsx("td", { style: { padding: "0.4vw 0", fontSize: "0.65vw", fontWeight: 500, color: "var(--ps-text-primary)" }, children: row.area }),
+          /* @__PURE__ */ jsxs("td", { style: { padding: "0.4vw 0", fontSize: "0.65vw", color: "var(--ps-text-secondary)" }, children: [
+            row.userNum,
+            " ",
+            unitLbl
+          ] }),
+          /* @__PURE__ */ jsx("td", { style: { padding: "0.4vw 0", fontSize: "0.65vw", color: "var(--ps-text-secondary)" }, children: row.chartLabel }),
+          /* @__PURE__ */ jsx("td", { style: { padding: "0.4vw 0", textAlign: "right" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "0.5vw", fontWeight: 600, color: fitColor, background: fitBg, borderRadius: "1vw", padding: "0.12vw 0.4vw", whiteSpace: "nowrap" }, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitLabelFn(row.fit, t) }) })
+        ] }, i);
+      }) })
     ] }),
-    allSizes.length > 1 && (() => {
-      const recIdx = allSizes.indexOf(recSize);
-      const tightSize = recIdx > 0 ? allSizes[recIdx - 1] : null;
-      const looseSize = recIdx < allSizes.length - 1 ? allSizes[recIdx + 1] : null;
-      const chips = [tightSize, recSize, looseSize].filter(Boolean);
-      return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chips", children: chips.map((s) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          className: `ps-tryon-sr-chip${s === displaySize ? " ps-active" : ""}${s === recSize && s !== displaySize ? " ps-recommended" : ""}`,
-          onClick: () => setSelectedSize(s === recSize ? null : s),
-          children: [
-            s,
-            s === recSize && /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-rec-dot" }),
-            s !== recSize && /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-chip-hint", children: s === tightSize ? t("tighter") : t("looser") })
-          ]
-        },
-        s
-      )) });
-    })(),
-    lengthSizes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-length-row", children: [
-      /* @__PURE__ */ jsx("span", { className: "ps-tryon-sec-length-label", children: t("Length") }),
-      /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chips", children: lengthSizes.map((s) => {
-        const active = (selectedLength || recLength) === s;
-        const isRec = s === recLength;
-        return /* @__PURE__ */ jsxs(
+    allSizes.length > 1 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.6vw" }, children: [
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.5vw", fontWeight: 700, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.1em", display: "block", marginBottom: "0.3vw" }, children: [
+        t("Select"),
+        " ",
+        sectionName,
+        " ",
+        t("Size")
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.25vw", flexWrap: "wrap" }, children: allSizes.map((s) => {
+        const isActive = s === displaySize;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setSelectedSize(s === recSize ? null : s),
+            style: {
+              padding: "0.25vw 0.6vw",
+              borderRadius: "0.3vw",
+              fontSize: "0.6vw",
+              fontWeight: 600,
+              border: isActive ? "1.5px solid var(--ps-accent)" : "1px solid rgba(0,0,0,0.12)",
+              background: isActive ? "var(--ps-accent)" : "transparent",
+              color: isActive ? "white" : "var(--ps-text-primary)",
+              cursor: "pointer",
+              transition: "all 0.2s",
+              fontFamily: "inherit"
+            },
+            children: s
+          },
+          s
+        );
+      }) })
+    ] }),
+    lengthSizes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.6vw" }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "0.5vw", fontWeight: 700, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.1em", display: "block", marginBottom: "0.3vw" }, children: t("Length Adjustment") }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "0.25vw", flexWrap: "wrap" }, children: lengthSizes.map((s) => {
+        const isActive = (selectedLength || recLength) === s;
+        return /* @__PURE__ */ jsx(
           "button",
           {
-            className: `ps-tryon-sr-chip${active ? " ps-active" : ""}${isRec && !active ? " ps-recommended" : ""}`,
             onClick: () => setSelectedLength(s === recLength ? null : s),
-            children: [
-              s,
-              isRec && /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-rec-dot" })
-            ]
+            style: {
+              padding: "0.25vw 0.6vw",
+              borderRadius: "0.3vw",
+              fontSize: "0.6vw",
+              fontWeight: 600,
+              border: isActive ? "1.5px solid var(--ps-accent)" : "1px solid rgba(0,0,0,0.12)",
+              background: isActive ? "var(--ps-accent)" : "transparent",
+              color: isActive ? "white" : "var(--ps-text-primary)",
+              cursor: "pointer",
+              transition: "all 0.2s",
+              fontFamily: "inherit"
+            },
+            children: s
           },
           s
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: { marginTop: "0.5vw" }, 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", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "0.5vw", paddingTop: "0.4vw", borderTop: "1px solid rgba(0,0,0,0.06)" }, children: [
+      /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: onBack, type: "button", style: { fontSize: "0.55vw" }, children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
+        " ",
+        t("Back to sections")
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onBack,
+          style: {
+            padding: "0.35vw 1vw",
+            borderRadius: "0.4vw",
+            fontSize: "0.6vw",
+            fontWeight: 600,
+            background: "var(--ps-accent)",
+            color: "white",
+            border: "none",
+            cursor: "pointer",
+            fontFamily: "inherit",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.3vw",
+            transition: "opacity 0.2s"
+          },
+          onMouseEnter: (e) => e.currentTarget.style.opacity = "0.9",
+          onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
+          children: [
+            t("Save and Continue"),
+            " →"
+          ]
+        }
+      )
+    ] })
   ] });
 }
 function SizeResultView({

package/package.json

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