@primestyleai/tryon 5.4.3 → 5.4.5

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,149 @@ 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 })
-    ] }),
-    /* @__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") })
+  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;
+  const secAny = sectionResult;
+  const backendLength = secAny?.length || displayLength;
+  const backendSize = secAny?.size || displaySize;
+  const backendAvailableLengths = secAny?.availableLengths || [];
+  const finalDisplayLength = selectedLength || backendLength;
+  return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-detail", style: { padding: "1.5vw", display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__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: t("Recommended Size") }),
+      /* @__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 }),
+        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: [
+        /* @__PURE__ */ jsxs("svg", { width: "1vw", height: "1vw", 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.75vw", color: "var(--ps-text-secondary)" }, children: [
+          matchPercent,
+          "% ",
+          t("Match based on your silhouette profile")
+        ] })
+      ] }),
+      fitRows.length > 0 && /* @__PURE__ */ jsx("div", { style: { background: "white", borderRadius: "0.5vw", border: "1px solid rgba(0,0,0,0.06)", overflow: "hidden", marginBottom: "1.2vw" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.5vw 0.6vw", fontSize: "0.6vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: t("Measurement") }),
+          /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.5vw 0.6vw", fontSize: "0.6vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: t("Your Body") }),
+          /* @__PURE__ */ jsx("th", { style: { textAlign: "left", padding: "0.5vw 0.6vw", fontSize: "0.6vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: t("Garment Spec") }),
+          /* @__PURE__ */ jsx("th", { style: { textAlign: "right", padding: "0.5vw 0.6vw", fontSize: "0.6vw", fontWeight: 600, color: "var(--ps-text-secondary)", textTransform: "uppercase", letterSpacing: "0.08em", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: t("Fit Result") })
+        ] }) }),
+        /* @__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: i < fitRows.length - 1 ? "1px solid rgba(0,0,0,0.04)" : "none" }, children: [
+            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", fontWeight: 500, color: "var(--ps-text-primary)" }, children: row.area }),
+            /* @__PURE__ */ jsxs("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: [
+              row.userNum,
+              " ",
+              unitLbl
+            ] }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: row.chartLabel }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", textAlign: "right" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", fontWeight: 600, color: fitColor, background: fitBg, borderRadius: "1vw", padding: "0.15vw 0.5vw", whiteSpace: "nowrap" }, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitLabelFn(row.fit, t) }) })
+          ] }, i);
+        }) })
       ] }) }),
-      /* @__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,
+      allSizes.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"),
           " ",
-          unitLbl
+          sectionName,
+          " ",
+          t("Size")
         ] }),
-        /* @__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("div", { style: { display: "flex", gap: "0.3vw", flexWrap: "wrap" }, children: allSizes.map((s) => {
+          const isActive = s === displaySize;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setSelectedSize(s === recSize ? null : s),
+              style: {
+                padding: "0.35vw 0.7vw",
+                borderRadius: "0.35vw",
+                fontSize: "0.7vw",
+                fontWeight: 600,
+                border: isActive ? "2px solid var(--ps-accent)" : "1.5px 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",
+                minWidth: "2vw",
+                textAlign: "center"
+              },
+              children: s
+            },
+            s
+          );
+        }) })
+      ] }),
+      (backendAvailableLengths.length > 0 || lengthSizes.length > 0) && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.8vw" }, 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) => {
+          const isActive = finalDisplayLength === s;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setSelectedLength(s === backendLength ? null : s),
+              style: {
+                padding: "0.35vw 0.7vw",
+                borderRadius: "0.35vw",
+                fontSize: "0.7vw",
+                fontWeight: 600,
+                border: isActive ? "2px solid var(--ps-accent)" : "1.5px 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
+          );
+        }) })
+      ] })
     ] }),
-    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(
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "0.6vw", borderTop: "1px solid rgba(0,0,0,0.06)", marginTop: "auto" }, children: [
+      /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: onBack, type: "button", style: { fontSize: "0.7vw" }, children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
+        " ",
+        t("Back to sections")
+      ] }),
+      /* @__PURE__ */ jsxs(
         "button",
         {
-          className: `ps-tryon-sr-chip${s === displaySize ? " ps-active" : ""}${s === recSize && s !== displaySize ? " ps-recommended" : ""}`,
-          onClick: () => setSelectedSize(s === recSize ? null : s),
+          onClick: onBack,
+          style: {
+            padding: "0.45vw 1.2vw",
+            borderRadius: "0.4vw",
+            fontSize: "0.7vw",
+            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: [
-            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") })
+            t("Continue"),
+            " →"
           ]
-        },
-        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(
-          "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" })
-            ]
-          },
-          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")
-    ] }) })
+        }
+      )
+    ] })
   ] });
 }
 function SizeResultView({

package/package.json

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