@primestyleai/tryon 4.1.2 → 4.2.0

package/dist/{index-aIBOmApE.js → index-CILUifQv.js}

@@ -314,6 +314,8 @@ const en = {
   "Edit values": "Edit values",
   "Based on your updated measurements, size": "Based on your updated measurements, size",
   "may be a better fit": "may be a better fit",
+  "Updated to": "Updated to",
+  "Your Measurements": "Your Measurements",
   "Fit Analysis": "Fit Analysis",
   "Show more": "Show more",
   "Done": "Done",

package/dist/primestyle-tryon.js

@@ -1,5 +1,5 @@
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-aIBOmApE.js";
-import { P, b, T, d, r } from "./index-aIBOmApE.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-CILUifQv.js";
+import { P, b, T, d, r } from "./index-CILUifQv.js";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'

package/dist/react/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-aIBOmApE.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-CILUifQv.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -453,22 +453,6 @@ function lbsToKg(lbs) {
 function ftInToCm(ft, inch) {
   return +(ft * 30.48 + inch * 2.54).toFixed(1);
 }
-function SvgIcon({ d, size = 18, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d })
-    }
-  );
-}
 function CameraIcon({ size = 18 }) {
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
@@ -1510,28 +1494,19 @@ function PrimeStyleTryonInner({
   }
   function SizeResultView() {
     const unitLbl = sizingUnit === "cm" ? t("cm") : t("in");
-    const [editing, setEditing] = useState(false);
     const [editVals, setEditVals] = useState({});
-    const [compareSize, setCompareSize] = useState("");
-    const cleanChart = (s) => {
-      const nums = s.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map((n) => parseFloat(n)).filter((n) => !isNaN(n));
-      if (nums.length === 0) return s;
-      if (nums.length === 1) return `${nums[0]}`;
-      return `${nums[0]}–${nums[1]}`;
+    const cleanNum = (s) => {
+      const ns = s.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map((n) => parseFloat(n)).filter((n) => !isNaN(n));
+      return ns.length === 1 ? `${ns[0]}` : ns.length > 1 ? `${ns[0]}–${ns[1]}` : s;
+    };
+    const pNum = (s) => {
+      const n = parseFloat(s.replace(/[^\d.]/g, ""));
+      return isNaN(n) ? 0 : n;
+    };
+    const pRange = (s) => {
+      const ns = s.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
+      return ns.length ? { min: Math.min(...ns), max: Math.max(...ns) } : { min: 0, max: 0 };
     };
-    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()));
@@ -1545,14 +1520,6 @@ function PrimeStyleTryonInner({
       if (sizeColIdx < 0 || !sizeGuide?.rows) return [];
       return sizeGuide.rows.map((r) => r[sizeColIdx]?.trim()).filter(Boolean);
     }, [sizeGuide, sizeColIdx]);
-    const pNum = (s) => {
-      const n = parseFloat(s.replace(/[^\d.]/g, ""));
-      return isNaN(n) ? 0 : n;
-    };
-    const pRange = (s) => {
-      const ns = s.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
-      return ns.length ? { min: Math.min(...ns), max: Math.max(...ns) } : { min: 0, max: 0 };
-    };
     const chartRangeFor = useCallback((measurement, size) => {
       if (!sizeGuide?.headers || !sizeGuide?.rows || sizeColIdx < 0) return null;
       const mc = sizeGuide.headers.findIndex((h) => {
@@ -1563,6 +1530,29 @@ function PrimeStyleTryonInner({
       const row = sizeGuide.rows.find((r) => r[sizeColIdx]?.trim() === size);
       return row?.[mc] ? { range: row[mc], ...pRange(row[mc]) } : null;
     }, [sizeGuide, sizeColIdx]);
+    const bestSize = useMemo(() => {
+      if (!sizingResult?.matchDetails?.length || !allSizes.length) return sizingResult?.recommendedSize || "";
+      if (!Object.keys(editVals).length) return sizingResult?.recommendedSize || "";
+      let best = "";
+      let bestScore = -1;
+      for (const size of allSizes) {
+        let score = 0;
+        for (const m of sizingResult.matchDetails) {
+          const edited = editVals[m.measurement];
+          const userNum = edited !== void 0 && edited !== "" ? parseFloat(edited) : pNum(m.userValue);
+          const alt = chartRangeFor(m.measurement, size);
+          if (alt && userNum >= alt.min && userNum <= alt.max) score++;
+        }
+        if (score > bestScore) {
+          bestScore = score;
+          best = size;
+        }
+      }
+      return best || sizingResult?.recommendedSize || "";
+    }, [editVals, sizingResult, allSizes, chartRangeFor]);
+    const origSize = sizingResult?.recommendedSize || "";
+    const activeSize = bestSize || origSize;
+    const sizeChanged = Object.keys(editVals).length > 0 && bestSize !== origSize;
     const fitRows = useMemo(() => {
       if (!sizingResult?.matchDetails?.length) return [];
       return sizingResult.matchDetails.map((m) => {
@@ -1571,8 +1561,8 @@ 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 !== recSize) {
-          const alt = chartRangeFor(m.measurement, compareSize);
+        if (activeSize !== origSize) {
+          const alt = chartRangeFor(m.measurement, activeSize);
           if (alt) {
             chartLabel = alt.range;
             rMin = alt.min;
@@ -1580,129 +1570,88 @@ function PrimeStyleTryonInner({
           }
         }
         const fit = userNum >= rMin && userNum <= rMax ? "good" : userNum < rMin ? "tight" : "loose";
-        return { area: m.measurement, userNum, chartLabel: cleanChart(chartLabel), fit };
+        return { area: m.measurement, userNum, chartLabel: cleanNum(chartLabel), fit };
       });
-    }, [sizingResult, compareSize, editVals, chartRangeFor, recSize]);
-    const suggestedSize = useMemo(() => {
-      if (!Object.keys(editVals).length || !sizingResult?.matchDetails?.length || !allSizes.length) return null;
-      let bestSize = "";
-      let bestScore = -1;
-      for (const size of allSizes) {
-        let score = 0;
-        for (const m of sizingResult.matchDetails) {
-          const edited = editVals[m.measurement];
-          const userNum = edited !== void 0 && edited !== "" ? parseFloat(edited) : pNum(m.userValue);
-          const alt = chartRangeFor(m.measurement, size);
-          if (alt && userNum >= alt.min && userNum <= alt.max) score++;
-        }
-        if (score > bestScore) {
-          bestScore = score;
-          bestSize = size;
-        }
-      }
-      return bestSize && bestSize !== recSize ? bestSize : null;
-    }, [editVals, sizingResult, allSizes, recSize, chartRangeFor]);
+    }, [sizingResult, editVals, chartRangeFor, activeSize, origSize]);
     const allIntlSizes = useMemo(() => {
       const backendIntl = sizingResult?.internationalSizes || {};
-      const upper = recSize.toUpperCase().trim();
-      const fromTable = SIZE_CONVERSIONS[upper] || SIZE_CONVERSIONS[recSize] || {};
+      const upper = activeSize.toUpperCase().trim();
+      const fromTable = SIZE_CONVERSIONS[upper] || SIZE_CONVERSIONS[activeSize] || {};
       return { ...fromTable, ...backendIntl };
-    }, [sizingResult, recSize]);
-    const confLabel = sizingResult?.confidence === "high" ? t("High Confidence") : sizingResult?.confidence === "medium" ? t("Medium Confidence") : t("Low Confidence");
+    }, [sizingResult, activeSize]);
     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" }),
         /* @__PURE__ */ jsx("p", { children: t("Analyzing your size...") })
       ] }),
       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 }) : /* @__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: confLabel })
-          ] })
-        ] }),
-        suggestedSize && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-suggestion", onClick: () => {
-          setCompareSize(suggestedSize);
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-back", onClick: () => {
+          setView("sizing-form");
+          setEditVals({});
         }, children: [
-          /* @__PURE__ */ jsx(SparkleIcon, { size: 14 }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            t("Based on your updated measurements, size"),
-            " ",
-            /* @__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") }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-grid", children: Object.entries(allIntlSizes).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-val", children: val }),
-            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-code", children: code })
-          ] }, code)) })
+          /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+          " ",
+          t("Back")
         ] }),
-        fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-top", children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-section-title", children: t("Fit Analysis") }),
-            /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-edit-btn", onClick: () => setEditing(!editing), children: [
-              /* @__PURE__ */ jsx(SvgIcon, { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7", size: 12 }),
-              editing ? t("Done") : t("Edit values")
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-left", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero", children: [
+              activeSize ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge", children: activeSize }) : /* @__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") })
+              ] })
+            ] }),
+            sizeChanged && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-size-changed", children: [
+              /* @__PURE__ */ jsx(SparkleIcon, { size: 13 }),
+              " ",
+              t("Updated to"),
+              " ",
+              /* @__PURE__ */ jsx("strong", { children: activeSize })
+            ] }),
+            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") }),
+              /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-grid", children: Object.entries(allIntlSizes).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-val", children: val }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-code", children: code })
+              ] }, code)) })
             ] })
           ] }),
-          allSizes.length > 1 && /* @__PURE__ */ jsx("select", { className: "ps-tryon-sr-compare-select", value: selSize, onChange: (e) => setCompareSize(e.target.value), children: allSizes.map((s) => /* @__PURE__ */ jsxs("option", { value: s, children: [
-            s,
-            s === recSize ? ` ★ ${t("recommended")}` : ""
-          ] }, s)) }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fit-cards", children: fitRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fc ps-fit-${row.fit}`, children: [
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-head", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fc-area", children: row.area }),
-              /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fc-badge ps-fit-${row.fit}`, children: row.fit === "good" ? `✓ ${t("within range")}` : row.fit === "tight" ? `↑ ${t("may be snug")}` : `↓ ${t("may be loose")}` })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-body", children: [
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-col", children: [
-                /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fc-label", children: t("You") }),
-                editing ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-edit", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-right", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-section-title", children: t("Your Measurements") }),
+            fitRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-meas ps-fit-${row.fit}`, children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-meas-head", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-meas-area", children: row.area }),
+                /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-meas-badge ps-fit-${row.fit}`, children: row.fit === "good" ? `✓ ${t("within range")}` : row.fit === "tight" ? `↑ ${t("may be snug")}` : `↓ ${t("may be loose")}` })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-meas-row", children: [
+                /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-meas-input-wrap", children: [
                   /* @__PURE__ */ jsx(
                     "input",
                     {
                       type: "number",
-                      className: "ps-tryon-sr-fc-input",
+                      className: "ps-tryon-sr-meas-input",
                       value: editVals[row.area] !== void 0 ? editVals[row.area] : row.userNum,
                       onChange: (e) => setEditVals((prev) => ({ ...prev, [row.area]: e.target.value }))
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fc-unit", children: unitLbl })
-                ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-value", children: [
-                  row.userNum,
-                  " ",
-                  unitLbl
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-col", children: [
-                /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-label", children: [
-                  t("Chart"),
-                  " (",
-                  selSize,
-                  ")"
+                  /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-meas-unit", children: unitLbl })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fc-value", children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-meas-vs", children: "vs" }),
+                /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-meas-chart", children: [
                   row.chartLabel,
                   " ",
                   unitLbl
                 ] })
               ] })
-            ] })
-          ] }, i)) })
+            ] }, i)),
+            fitRows.length === 0 && sizingResult.reasoning && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) })
+          ] })
         ] }),
-        fitRows.length === 0 && sizingResult.reasoning && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-ctas", children: [
-          /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
-            t("See how it looks on you"),
-            " ",
-            /* @__PURE__ */ jsx(ArrowRightIcon, {})
-          ] }),
-          /* @__PURE__ */ jsx("button", { className: "ps-tryon-btn-secondary", onClick: handleClose, children: t("Done") })
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
+          t("See how it looks on you"),
+          " ",
+          /* @__PURE__ */ jsx(ArrowRightIcon, {})
         ] })
       ] })
     ] });
@@ -1922,7 +1871,7 @@ function PrimeStyleTryonInner({
     ] }),
     view !== "idle" && /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), onClick: (e) => {
       if (e.target === e.currentTarget) handleClose();
-    }, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+    }, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
         /* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: t("Virtual Try-On") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-header-actions", children: [
@@ -2392,21 +2341,25 @@ const STYLES = `
   .ps-tryon-sr-hero-conf { font-size: 0.73vw; font-weight: 600; }
   .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
 
-  /* Suggestion banner */
-  .ps-tryon-sr-suggestion {
-    display: flex; align-items: center; gap: 0.52vw;
-    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; }
 
+  /* Size changed notice */
+  .ps-tryon-sr-size-changed {
+    display: flex; align-items: center; gap: 0.36vw;
+    padding: 0.42vw 0.68vw; border-radius: 0.42vw;
+    background: rgba(187,148,92,0.08); border: 1px solid rgba(187,148,92,0.2);
+    font-size: 0.73vw; color: #d6ba7d; margin-top: 0.52vw;
+    animation: ps-fade-up 0.25s ease both;
+  }
+  .ps-tryon-sr-size-changed svg { stroke: #bb945c; }
+  .ps-tryon-sr-size-changed strong { color: #fff; }
+
+  /* Split layout */
+  .ps-tryon-sr-split { display: flex; gap: 1.5vw; min-height: 0; }
+  .ps-tryon-sr-left { flex: 0 0 45%; display: flex; flex-direction: column; gap: 1vw; }
+  .ps-tryon-sr-right { flex: 1; display: flex; flex-direction: column; gap: 0.52vw; }
+
   /* 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; }
 
@@ -2448,82 +2401,44 @@ const STYLES = `
   .ps-tryon-sr-comparing { font-size: 0.73vw; color: #bb945c; margin-top: 0.42vw; }
   .ps-tryon-sr-comparing strong { color: #d6ba7d; }
 
-  /* Fit analysis */
-  .ps-tryon-sr-fit { }
-  .ps-tryon-sr-fit-top {
-    display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.52vw;
-  }
-  .ps-tryon-sr-edit-btn {
-    display: inline-flex; align-items: center; gap: 0.31vw;
-    padding: 0.31vw 0.73vw; border: 1px solid rgba(187,148,92,0.4); border-radius: 0.42vw;
-    background: rgba(187,148,92,0.06); color: #bb945c; font-size: 0.68vw; font-weight: 600;
-    cursor: pointer; font-family: inherit; transition: all 0.2s;
-  }
-  .ps-tryon-sr-edit-btn:hover { background: rgba(187,148,92,0.12); border-color: #bb945c; }
-  .ps-tryon-sr-edit-btn svg { stroke: currentColor; }
-
-  .ps-tryon-sr-fit-cards { display: flex; flex-direction: column; gap: 0.42vw; }
-
-  .ps-tryon-sr-fc {
-    border: 1px solid #282828; border-radius: 0.63vw; overflow: hidden;
+  /* Measurement rows (right column) */
+  .ps-tryon-sr-meas {
+    border: 1px solid #282828; border-radius: 0.57vw; overflow: hidden;
     transition: border-color 0.2s;
   }
-  .ps-tryon-sr-fc.ps-fit-good { border-left: 3px solid #4ade80; }
-  .ps-tryon-sr-fc.ps-fit-tight { border-left: 3px solid #f59e0b; }
-  .ps-tryon-sr-fc.ps-fit-loose { border-left: 3px solid #60a5fa; }
-
-  .ps-tryon-sr-fc-head {
+  .ps-tryon-sr-meas.ps-fit-good { border-left: 3px solid #4ade80; }
+  .ps-tryon-sr-meas.ps-fit-tight { border-left: 3px solid #f59e0b; }
+  .ps-tryon-sr-meas.ps-fit-loose { border-left: 3px solid #60a5fa; }
+  .ps-tryon-sr-meas-head {
     display: flex; align-items: center; justify-content: space-between;
-    padding: 0.57vw 0.83vw; background: #161616;
-  }
-  .ps-tryon-sr-fc-area { font-size: 0.83vw; font-weight: 700; color: #fff; }
-
-  .ps-tryon-sr-fc-badge {
-    display: inline-flex; align-items: center; gap: 0.21vw; padding: 0.21vw 0.52vw;
-    border-radius: 0.31vw; font-size: 0.63vw; font-weight: 700; white-space: nowrap;
-  }
-  .ps-tryon-sr-fc-badge.ps-fit-good { background: rgba(74,222,128,0.08); color: #4ade80; }
-  .ps-tryon-sr-fc-badge.ps-fit-tight { background: rgba(245,158,11,0.08); color: #f59e0b; }
-  .ps-tryon-sr-fc-badge.ps-fit-loose { background: rgba(96,165,250,0.08); color: #60a5fa; }
-
-  .ps-tryon-sr-fc-body {
-    display: flex; gap: 1.5vw; padding: 0.52vw 0.83vw 0.62vw;
-  }
-  .ps-tryon-sr-fc-col { flex: 1; }
-  .ps-tryon-sr-fc-label { font-size: 0.52vw; font-weight: 700; color: #555; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.15vw; }
-  .ps-tryon-sr-fc-value { font-size: 0.88vw; font-weight: 600; color: #ccc; }
-  .ps-tryon-sr-fc-edit { display: flex; align-items: center; gap: 0.26vw; }
-  .ps-tryon-sr-fc-input {
-    width: 4.2vw; padding: 0.26vw 0.42vw; border: 1.5px solid #444; border-radius: 0.36vw;
-    background: #0c0c0d; color: #fff; font-size: 0.88vw; font-weight: 600; font-family: inherit;
+    padding: 0.47vw 0.73vw; background: #161616;
+  }
+  .ps-tryon-sr-meas-area { font-size: 0.78vw; font-weight: 700; color: #fff; }
+  .ps-tryon-sr-meas-badge {
+    display: inline-flex; align-items: center; gap: 0.21vw; padding: 0.16vw 0.47vw;
+    border-radius: 0.26vw; font-size: 0.57vw; font-weight: 700; white-space: nowrap;
+  }
+  .ps-tryon-sr-meas-badge.ps-fit-good { background: rgba(74,222,128,0.08); color: #4ade80; }
+  .ps-tryon-sr-meas-badge.ps-fit-tight { background: rgba(245,158,11,0.08); color: #f59e0b; }
+  .ps-tryon-sr-meas-badge.ps-fit-loose { background: rgba(96,165,250,0.08); color: #60a5fa; }
+  .ps-tryon-sr-meas-row {
+    display: flex; align-items: center; gap: 0.52vw; padding: 0.47vw 0.73vw;
+  }
+  .ps-tryon-sr-meas-input-wrap { display: flex; align-items: center; gap: 0.21vw; }
+  .ps-tryon-sr-meas-input {
+    width: 3.8vw; padding: 0.26vw 0.36vw; border: 1.5px solid #444; border-radius: 0.31vw;
+    background: #0c0c0d; color: #fff; font-size: 0.83vw; font-weight: 600; font-family: inherit;
     outline: none; text-align: center; -moz-appearance: textfield;
     transition: border-color 0.2s, background 0.2s;
   }
-  .ps-tryon-sr-fc-input::-webkit-outer-spin-button,
-  .ps-tryon-sr-fc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-  .ps-tryon-sr-fc-input:focus { border-color: #bb945c; background: #1a1a1a; }
-  .ps-tryon-sr-fc-unit { font-size: 0.63vw; color: #555; }
+  .ps-tryon-sr-meas-input::-webkit-outer-spin-button,
+  .ps-tryon-sr-meas-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+  .ps-tryon-sr-meas-input:focus { border-color: #bb945c; background: #1a1a1a; }
+  .ps-tryon-sr-meas-unit { font-size: 0.63vw; color: #555; }
+  .ps-tryon-sr-meas-vs { font-size: 0.63vw; color: #444; font-weight: 700; }
+  .ps-tryon-sr-meas-chart { font-size: 0.83vw; font-weight: 600; color: #888; }
 
-  /* Compare dropdown */
-  .ps-tryon-sr-compare { }
-  .ps-tryon-sr-compare-select {
-    width: 100%; padding: 0.57vw 2vw 0.57vw 0.83vw; border: 1.5px solid #333; border-radius: 0.57vw;
-    background: #1a1b1a; color: #fff; font-size: 0.83vw; font-weight: 600; font-family: inherit;
-    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
-    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-    background-repeat: no-repeat; background-position: right 0.73vw center;
-  }
-  .ps-tryon-sr-compare-select:focus { border-color: #bb945c; }
-  .ps-tryon-sr-compare-select option { background: #1a1b1a; color: #fff; }
-  .ps-tryon-sr-compare-note {
-    font-size: 0.73vw; color: #bb945c; margin-top: 0.42vw; display: flex; align-items: center; gap: 0.52vw;
-  }
-  .ps-tryon-sr-compare-reset {
-    background: none; border: 1px solid #bb945c; color: #bb945c; padding: 0.16vw 0.52vw;
-    border-radius: 0.31vw; font-size: 0.63vw; font-weight: 600; cursor: pointer;
-    font-family: inherit; transition: all 0.2s;
-  }
-  .ps-tryon-sr-compare-reset:hover { background: rgba(187,148,92,0.1); }
+  /* (compare dropdown removed — recalculation is automatic) */
 
   .ps-tryon-sr-fit-badge {
     display: inline-flex; align-items: center; gap: 0.26vw; padding: 0.21vw 0.52vw;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",
@@ -53,5 +53,8 @@
     "terser": "^5.31.0",
     "typescript": "^5.5.0",
     "vite": "^5.4.0"
+  },
+  "dependencies": {
+    "@primestyleai/tryon": "^4.1.2"
   }
 }