@primestyleai/tryon 3.18.0 → 3.20.0

package/dist/{index-Lf4qO_jW.js → index-Dr4MxT8W.js}

@@ -308,6 +308,10 @@ const en = {
   "Compare with another size": "Compare with another size",
   "recommended": "recommended",
   "size": "size",
+  "Your size in other countries": "Your size in other countries",
+  "Showing fit for size": "Showing fit for size",
+  "Back to": "Back to",
+  "Edit values": "Edit values",
   "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-Lf4qO_jW.js";
-import { P, b, T, d, r } from "./index-Lf4qO_jW.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-Dr4MxT8W.js";
+import { P, b, T, d, r } from "./index-Dr4MxT8W.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-Lf4qO_jW.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-Dr4MxT8W.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -406,6 +406,26 @@ const FALLBACK_FIELDS_MALE = [
   { key: "inseam", label: "Inseam", required: false, unit: "cm", placeholder: "e.g. 81", category: "body" },
   { key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" }
 ];
+const SIZE_CONVERSIONS = {
+  "XXS": { US: "XXS", UK: "4", EU: "30", IT: "36", FR: "32", DE: "30", JP: "3", KR: "40", AU: "4", BR: "PP" },
+  "XS": { US: "XS", UK: "6", EU: "32", IT: "38", FR: "34", DE: "32", JP: "5", KR: "44", AU: "6", BR: "PP" },
+  "S": { US: "S", UK: "8", EU: "36", IT: "42", FR: "38", DE: "36", JP: "9", KR: "55", AU: "10", BR: "P" },
+  "M": { US: "M", UK: "10", EU: "38", IT: "44", FR: "40", DE: "38", JP: "11", KR: "66", AU: "12", BR: "M" },
+  "L": { US: "L", UK: "12", EU: "40", IT: "46", FR: "42", DE: "40", JP: "13", KR: "77", AU: "14", BR: "G" },
+  "XL": { US: "XL", UK: "14", EU: "42", IT: "48", FR: "44", DE: "42", JP: "15", KR: "88", AU: "16", BR: "GG" },
+  "XXL": { US: "XXL", UK: "16", EU: "44", IT: "50", FR: "46", DE: "44", JP: "17", KR: "99", AU: "18", BR: "XG" },
+  "XXXL": { US: "XXXL", UK: "18", EU: "46", IT: "52", FR: "48", DE: "46", JP: "19", KR: "100", AU: "20", BR: "EG" },
+  // Numeric sizes (EU-based)
+  "34": { US: "XS", UK: "6", EU: "34", IT: "38", FR: "34", DE: "34", JP: "5", KR: "44", AU: "6" },
+  "36": { US: "S", UK: "8", EU: "36", IT: "40", FR: "36", DE: "36", JP: "7", KR: "55", AU: "8" },
+  "38": { US: "M", UK: "10", EU: "38", IT: "42", FR: "38", DE: "38", JP: "9", KR: "66", AU: "10" },
+  "40": { US: "L", UK: "12", EU: "40", IT: "44", FR: "40", DE: "40", JP: "11", KR: "77", AU: "12" },
+  "42": { US: "XL", UK: "14", EU: "42", IT: "46", FR: "42", DE: "42", JP: "13", KR: "88", AU: "14" },
+  "44": { US: "XXL", UK: "16", EU: "44", IT: "48", FR: "44", DE: "44", JP: "15", KR: "99", AU: "16" },
+  "46": { US: "XXXL", UK: "18", EU: "46", IT: "50", FR: "46", DE: "46", JP: "17", KR: "100", AU: "18" },
+  "48": { US: "XXXL", UK: "20", EU: "48", IT: "52", FR: "48", DE: "48", JP: "19", KR: "105", AU: "20" },
+  "50": { US: "XXXL", UK: "22", EU: "50", IT: "54", FR: "50", DE: "50", JP: "21", KR: "110", AU: "22" }
+};
 const STEP_LABELS = ["", "Welcome", "Size", "Your Fit", "Try On"];
 const TOTAL_STEPS = 4;
 function detectLocale() {
@@ -424,9 +444,6 @@ function detectLocale() {
 function isImperial(locale) {
   return locale === "US" || locale === "UK";
 }
-function cmToIn(cm) {
-  return +(cm / 2.54).toFixed(1);
-}
 function inToCm(inches) {
   return +(inches * 2.54).toFixed(1);
 }
@@ -436,6 +453,22 @@ 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" }),
@@ -826,115 +859,7 @@ function PrimeStyleTryonInner({
     }
     return formGender === "female" ? FALLBACK_FIELDS_FEMALE : FALLBACK_FIELDS_MALE;
   }, [sizeGuide, formGender]);
-  const computeSizingLocally = useCallback(() => {
-    if (sizingMethod !== "exact" || !sizeGuide?.found || !sizeGuide.headers || !sizeGuide.rows) return null;
-    const HEADER_MAP = {
-      chest: "chest",
-      bust: "bust",
-      waist: "waist",
-      hips: "hips",
-      hip: "hips",
-      shoulder: "shoulderWidth",
-      shoulders: "shoulderWidth",
-      "shoulder width": "shoulderWidth",
-      sleeve: "sleeveLength",
-      "sleeve length": "sleeveLength",
-      inseam: "inseam",
-      neck: "neckCircumference",
-      foot: "footLengthCm",
-      "foot length": "footLengthCm"
-    };
-    const INTL = /* @__PURE__ */ new Set(["eu", "us", "uk", "it", "fr", "de", "jp", "cn", "kr", "au", "br", "eur"]);
-    const userMeas = {};
-    for (const f of dynamicFields) {
-      if (f.unit === "size" || ["shoeEU", "shoeUS", "shoeUK"].includes(f.key)) continue;
-      const raw = formRef.current[f.key];
-      if (!raw) continue;
-      const v = parseFloat(raw);
-      if (isNaN(v)) continue;
-      userMeas[f.key] = sizingUnit === "in" ? inToCm(v) : v;
-    }
-    for (const k of ["chest", "bust", "waist", "hips", "shoulderWidth", "sleeveLength", "inseam", "neckCircumference", "footLengthCm"]) {
-      if (userMeas[k] || !formRef.current[k]) continue;
-      const v = parseFloat(formRef.current[k]);
-      if (!isNaN(v)) userMeas[k] = sizingUnit === "in" ? inToCm(v) : v;
-    }
-    if (Object.keys(userMeas).length === 0) return null;
-    let idx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
-    if (idx < 0) idx = sizeGuide.headers.findIndex((h) => /size|taglia|größe|taille/i.test(h.trim()));
-    if (idx < 0) {
-      const firstColVals = sizeGuide.rows.map((r) => r[0]?.trim() || "");
-      idx = firstColVals.some((v) => /^(XXS|XS|S|M|L|XL|XXL|XXXL|\d{1,3})$/i.test(v)) ? 0 : 0;
-    }
-    const colMap = [];
-    const intlCols = [];
-    sizeGuide.headers.forEach((h, i) => {
-      if (i === idx) return;
-      const lower = h.toLowerCase().trim().replace(/\s*\(.*\)/, "");
-      const clean = lower.replace(/\s*size\s*/gi, "").trim();
-      if (INTL.has(clean)) {
-        intlCols.push({ hi: i, code: clean.toUpperCase() });
-        return;
-      }
-      let fk = HEADER_MAP[clean];
-      if (!fk) {
-        const pk = Object.keys(HEADER_MAP).find((k) => clean.includes(k));
-        if (pk) fk = HEADER_MAP[pk];
-      }
-      if (fk && userMeas[fk] !== void 0) colMap.push({ hi: i, formKey: fk, label: h.trim() });
-    });
-    if (colMap.length === 0) return null;
-    const parseRange = (cell) => {
-      const nums = cell.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
-      if (nums.length === 0) return null;
-      return { min: Math.min(...nums), max: Math.max(...nums) };
-    };
-    const scores = [];
-    for (const row of sizeGuide.rows) {
-      const label = row[idx] || "";
-      let fitting = 0;
-      let total = 0;
-      let dist = 0;
-      const details = [];
-      for (const col of colMap) {
-        const range = parseRange(row[col.hi] || "");
-        if (!range) continue;
-        total++;
-        const uv = userMeas[col.formKey];
-        const fit = uv >= range.min && uv <= range.max ? "good" : uv < range.min ? "tight" : "loose";
-        if (fit === "good") fitting++;
-        dist += Math.abs(uv - (range.min + range.max) / 2);
-        const dispVal = sizingUnit === "in" ? `${cmToIn(uv)} in` : `${Math.round(uv)} cm`;
-        const dispRange = sizingUnit === "in" ? `${cmToIn(range.min)}–${cmToIn(range.max)} in` : `${Math.round(range.min)}–${Math.round(range.max)} cm`;
-        details.push({ measurement: col.label, userValue: dispVal, chartRange: dispRange, fit });
-      }
-      if (total === 0) continue;
-      const intl = {};
-      for (const ic of intlCols) {
-        if (row[ic.hi]) intl[ic.code] = row[ic.hi];
-      }
-      scores.push({ label, fitting, total, dist, details, intl, row });
-    }
-    if (scores.length === 0) return null;
-    scores.sort((a, b) => b.fitting - a.fitting || a.dist - b.dist);
-    const best = scores[0];
-    const conf = best.fitting === best.total ? "high" : best.fitting >= best.total * 0.6 ? "medium" : "low";
-    return {
-      recommendedSize: best.label,
-      confidence: conf,
-      reasoning: `Based on your measurements, size ${best.label} is the best fit.`,
-      internationalSizes: best.intl,
-      matchDetails: best.details,
-      method: "deterministic"
-    };
-  }, [sizingMethod, sizeGuide, dynamicFields, sizingUnit]);
   const submitSizing = useCallback(async () => {
-    const localResult = computeSizingLocally();
-    if (localResult) {
-      setSizingResult(localResult);
-      setSizingLoading(false);
-      return;
-    }
     if (!apiRef.current) return;
     const baseUrl = getApiUrl(apiUrl);
     const key = getApiKey();
@@ -993,7 +918,7 @@ function PrimeStyleTryonInner({
     } finally {
       setSizingLoading(false);
     }
-  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields, computeSizingLocally]);
+  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields]);
   const handleTryOnSubmit = useCallback(async () => {
     if (!selectedFile || !apiRef.current || !sseRef.current) {
       const msg = !apiRef.current ? t("SDK not configured. Please provide an API key.") : t("Something went wrong");
@@ -1582,65 +1507,71 @@ function PrimeStyleTryonInner({
     ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function SizeResultView() {
-    const isCmR = sizingUnit === "cm";
-    const unitLbl = isCmR ? t("cm") : t("in");
-    const allSizes = useMemo(() => {
-      if (!sizeGuide?.found || !sizeGuide.headers || !sizeGuide.rows) return [];
-      const idx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
-      const col = idx >= 0 ? idx : 0;
-      return sizeGuide.rows.map((r) => r[col]?.trim()).filter(Boolean);
-    }, [sizeGuide]);
-    const [compareSize, setCompareSize] = useState("");
+    const unitLbl = sizingUnit === "cm" ? t("cm") : t("in");
+    const [editing, setEditing] = useState(false);
     const [editVals, setEditVals] = useState({});
-    const parseNumFromDetail = (s) => {
+    const [compareSize, setCompareSize] = useState("");
+    const recSize = sizingResult?.recommendedSize || "";
+    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;
+      }
+      return 0;
+    }, [sizeGuide]);
+    const allSizes = useMemo(() => {
+      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 parseRangeFromDetail = (s) => {
-      const nums = s.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
-      if (nums.length === 0) return { min: 0, max: 0 };
-      return { min: Math.min(...nums), max: Math.max(...nums) };
+    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 getChartRangeForSize = useCallback((measurement, size) => {
-      if (!sizeGuide?.found || !sizeGuide.headers || !sizeGuide.rows) return null;
-      const sizeCol = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
-      const sc = sizeCol >= 0 ? sizeCol : 0;
-      const measCol = sizeGuide.headers.findIndex((h) => {
-        const a = h.toLowerCase().trim();
-        const b = measurement.toLowerCase().trim();
+    const chartRangeFor = useCallback((measurement, size) => {
+      if (!sizeGuide?.headers || !sizeGuide?.rows || sizeColIdx < 0) return null;
+      const mc = sizeGuide.headers.findIndex((h) => {
+        const a = h.toLowerCase().trim(), b = measurement.toLowerCase().trim();
         return a === b || a.includes(b) || b.includes(a);
       });
-      if (measCol < 0) return null;
-      const row = sizeGuide.rows.find((r) => r[sc]?.trim() === size);
-      if (!row || !row[measCol]) return null;
-      const cell = row[measCol];
-      const parsed = parseRangeFromDetail(cell);
-      return { range: cell, ...parsed };
-    }, [sizeGuide]);
+      if (mc < 0) return null;
+      const row = sizeGuide.rows.find((r) => r[sizeColIdx]?.trim() === size);
+      return row?.[mc] ? { range: row[mc], ...pRange(row[mc]) } : null;
+    }, [sizeGuide, sizeColIdx]);
     const fitRows = useMemo(() => {
-      const base = sizingResult?.matchDetails;
-      if (!base || base.length === 0) return [];
-      compareSize || sizingResult?.recommendedSize || "";
-      return base.map((m) => {
-        const editedRaw = editVals[m.measurement];
-        const origNum = parseNumFromDetail(m.userValue);
-        const userNum = editedRaw !== void 0 && editedRaw !== "" ? parseFloat(editedRaw) : origNum;
-        let chartRange = m.chartRange;
-        let rangeMin = parseRangeFromDetail(m.chartRange).min;
-        let rangeMax = parseRangeFromDetail(m.chartRange).max;
-        if (compareSize && compareSize !== sizingResult?.recommendedSize) {
-          const alt = getChartRangeForSize(m.measurement, compareSize);
+      if (!sizingResult?.matchDetails?.length) return [];
+      return sizingResult.matchDetails.map((m) => {
+        const origNum = pNum(m.userValue);
+        const edited = editVals[m.measurement];
+        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) {
+          const alt = chartRangeFor(m.measurement, compareSize);
           if (alt) {
-            chartRange = alt.range;
-            rangeMin = alt.min;
-            rangeMax = alt.max;
+            chartLabel = alt.range;
+            rMin = alt.min;
+            rMax = alt.max;
           }
         }
-        const fit = userNum >= rangeMin && userNum <= rangeMax ? "good" : userNum < rangeMin ? "tight" : "loose";
-        return { measurement: m.measurement, userNum, userDisplay: `${userNum}`, chartRange, fit };
+        const fit = userNum >= rMin && userNum <= rMax ? "good" : userNum < rMin ? "tight" : "loose";
+        return { area: m.measurement, userNum, chartLabel, fit };
       });
-    }, [sizingResult, compareSize, editVals, getChartRangeForSize]);
-    const intlSizes = sizingResult?.internationalSizes || {};
+    }, [sizingResult, compareSize, editVals, chartRangeFor]);
+    const allIntlSizes = useMemo(() => {
+      const backendIntl = sizingResult?.internationalSizes || {};
+      const upper = recSize.toUpperCase().trim();
+      const fromTable = SIZE_CONVERSIONS[upper] || SIZE_CONVERSIONS[recSize] || {};
+      const merged = { ...fromTable, ...backendIntl };
+      return merged;
+    }, [sizingResult, recSize]);
     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" }),
@@ -1648,69 +1579,80 @@ function PrimeStyleTryonInner({
       ] }),
       sizingResult && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge", children: sizingResult.recommendedSize }),
+          recSize && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge", children: recSize }),
           /* @__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") })
           ] })
         ] }),
-        Object.keys(intlSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Equivalent Sizes") }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-primary", children: Object.entries(intlSizes).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
+        Object.keys(allIntlSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Your size in other countries") }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-primary", 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__ */ jsxs("div", { className: "ps-tryon-sr-compare", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Compare with another size") }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              className: "ps-tryon-sr-compare-select",
-              value: compareSize || sizingResult.recommendedSize,
-              onChange: (e) => setCompareSize(e.target.value),
-              children: allSizes.map((s) => /* @__PURE__ */ jsxs("option", { value: s, children: [
-                s,
-                s === sizingResult.recommendedSize ? ` — ${t("recommended")}` : ""
-              ] }, s))
-            }
-          )
+          /* @__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)) }),
+          compareSize && compareSize !== recSize && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-compare-note", children: [
+            t("Showing fit for size"),
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: compareSize }),
+            /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-compare-reset", onClick: () => setCompareSize(""), children: [
+              t("Back to"),
+              " ",
+              recSize
+            ] })
+          ] })
         ] }),
         fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-label", children: [
-            t("Fit Analysis"),
-            compareSize && compareSize !== sizingResult.recommendedSize && /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-label-hint", children: [
-              " — ",
-              t("size"),
-              " ",
-              compareSize
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-label", 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-fit-table", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: t("Area") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: t("You") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: t("Chart") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
+          fitRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-card ps-fit-${row.fit}`, children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-card-top", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-area", children: row.area }),
+              /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: row.fit === "good" ? `✓ ${t("within range")}` : row.fit === "tight" ? `↑ ${t("may be snug")}` : `↓ ${t("may be loose")}` })
             ] }),
-            fitRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-row ps-fit-${row.fit}`, children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: row.measurement }),
-              /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-you", children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "number",
-                    className: "ps-tryon-sr-fit-input",
-                    value: editVals[row.measurement] !== void 0 ? editVals[row.measurement] : row.userNum,
-                    onChange: (e) => setEditVals((prev) => ({ ...prev, [row.measurement]: e.target.value }))
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-unit", children: unitLbl })
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-card-bottom", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-val-label", children: t("You") }),
+                editing ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val-input-wrap", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "number",
+                      className: "ps-tryon-sr-fit-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-fit-unit", children: unitLbl })
+                ] }) : /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-val-text", children: [
+                  row.userNum,
+                  " ",
+                  unitLbl
+                ] })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: row.chartRange }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: row.fit === "good" ? "✓ " + t("within range") : row.fit === "tight" ? "↑ " + t("may be snug") : "↓ " + t("may be loose") }) })
-            ] }, i))
-          ] })
+              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val", children: [
+                /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-val-label", children: [
+                  t("Chart"),
+                  " (",
+                  selSize,
+                  ")"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-val-text", children: row.chartLabel })
+              ] })
+            ] })
+          ] }, i))
         ] }),
         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: [
@@ -1995,7 +1937,7 @@ const STYLES = `
   .ps-tryon-modal {
     background: var(--ps-modal-bg, #111211); color: var(--ps-modal-color, #fff);
     border-radius: var(--ps-modal-radius, 0.83vw); width: var(--ps-modal-width, 100%);
-    max-width: var(--ps-modal-max-width, 27vw); max-height: 92vh; overflow-y: auto;
+    max-width: var(--ps-modal-max-width, 32vw); max-height: 92vh; overflow-y: auto;
     font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
     box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
     scrollbar-width: thin; scrollbar-color: #333 transparent;
@@ -2463,44 +2405,60 @@ 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 table */
-  .ps-tryon-sr-fit { }
-  .ps-tryon-sr-fit-table { border: 1.5px solid #333; border-radius: 0.73vw; overflow: hidden; }
-  .ps-tryon-sr-fit-header {
-    display: flex; padding: 0.57vw 0.83vw; background: #1a1b1a; border-bottom: 1px solid #333;
-  }
-  .ps-tryon-sr-fit-header span {
-    font-size: 0.68vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.06em;
-  }
-  .ps-tryon-sr-fit-row {
-    display: flex; align-items: center; padding: 0.57vw 0.83vw;
-    border-bottom: 1px solid #222; transition: background 0.15s;
-  }
-  .ps-tryon-sr-fit-row:last-child { border-bottom: none; }
-  .ps-tryon-sr-fit-row:hover { background: rgba(255,255,255,0.02); }
-  .ps-tryon-sr-fit-row.ps-fit-good { border-left: 3px solid #4ade80; }
-  .ps-tryon-sr-fit-row.ps-fit-tight { border-left: 3px solid #f59e0b; }
-  .ps-tryon-sr-fit-row.ps-fit-loose { border-left: 3px solid #60a5fa; }
-
-  .ps-tryon-sr-fit-col-area { flex: 0 0 28%; font-size: 0.78vw; font-weight: 600; color: #fff; }
-  .ps-tryon-sr-fit-col-you { flex: 0 0 22%; }
-  .ps-tryon-sr-fit-col-chart { flex: 0 0 22%; font-size: 0.78vw; color: #999; font-weight: 500; }
-  .ps-tryon-sr-fit-col-fit { flex: 1; text-align: right; }
+  /* Fit analysis cards */
+  .ps-tryon-sr-fit { display: flex; flex-direction: column; gap: 0.52vw; }
+  .ps-tryon-sr-fit-header-row {
+    display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.1vw;
+  }
+  .ps-tryon-sr-edit-btn {
+    display: inline-flex; align-items: center; gap: 0.31vw;
+    padding: 0.26vw 0.63vw; border: 1.5px solid #bb945c; border-radius: 0.36vw;
+    background: transparent; color: #bb945c; font-size: 0.63vw; font-weight: 600;
+    cursor: pointer; font-family: inherit; transition: all 0.2s;
+  }
+  .ps-tryon-sr-edit-btn:hover { background: rgba(187,148,92,0.1); }
+  .ps-tryon-sr-edit-btn svg { stroke: currentColor; }
+  .ps-tryon-sr-fit-card {
+    border: 1.5px solid #333; border-radius: 0.63vw; overflow: hidden; transition: border-color 0.2s;
+  }
+  .ps-tryon-sr-fit-card.ps-fit-good { border-left: 3px solid #4ade80; }
+  .ps-tryon-sr-fit-card.ps-fit-tight { border-left: 3px solid #f59e0b; }
+  .ps-tryon-sr-fit-card.ps-fit-loose { border-left: 3px solid #60a5fa; }
+  .ps-tryon-sr-fit-card-top {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0.52vw 0.83vw; background: #1a1b1a;
+  }
+  .ps-tryon-sr-fit-area { font-size: 0.83vw; font-weight: 600; color: #fff; }
+  .ps-tryon-sr-fit-card-bottom {
+    display: flex; gap: 1vw; padding: 0.52vw 0.83vw;
+  }
+  .ps-tryon-sr-fit-val { flex: 1; }
+  .ps-tryon-sr-fit-val-label { font-size: 0.57vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.21vw; display: block; }
+  .ps-tryon-sr-fit-val-input-wrap { display: flex; align-items: center; gap: 0.26vw; }
+  .ps-tryon-sr-fit-val-text { font-size: 0.83vw; font-weight: 600; color: #ccc; }
 
   .ps-tryon-sr-fit-input {
-    width: 3.5vw; padding: 0.26vw 0.42vw; border: 1.5px solid #333; border-radius: 0.36vw;
-    background: #111211; color: #fff; font-size: 0.78vw; font-weight: 600; font-family: inherit;
+    width: 4vw; padding: 0.31vw 0.42vw; border: 1.5px solid #444; border-radius: 0.36vw;
+    background: #0c0c0d; color: #fff; font-size: 0.83vw; font-weight: 600; font-family: inherit;
     outline: none; text-align: center; -moz-appearance: textfield;
   }
   .ps-tryon-sr-fit-input::-webkit-outer-spin-button,
   .ps-tryon-sr-fit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
-  .ps-tryon-sr-fit-input:focus { border-color: #bb945c; }
-  .ps-tryon-sr-fit-unit { font-size: 0.57vw; color: #666; margin-left: 0.2vw; }
+  .ps-tryon-sr-fit-input:focus { border-color: #bb945c; background: #1a1b1a; }
+  .ps-tryon-sr-fit-unit { font-size: 0.68vw; color: #666; }
+
+  .ps-tryon-sr-fit-badge {
+    display: inline-flex; align-items: center; gap: 0.26vw; padding: 0.26vw 0.57vw;
+    border-radius: 0.36vw; font-size: 0.68vw; font-weight: 700; white-space: nowrap;
+  }
+  .ps-tryon-sr-fit-badge.ps-fit-good { background: rgba(74,222,128,0.1); color: #4ade80; }
+  .ps-tryon-sr-fit-badge.ps-fit-tight { background: rgba(245,158,11,0.1); color: #f59e0b; }
+  .ps-tryon-sr-fit-badge.ps-fit-loose { background: rgba(96,165,250,0.1); color: #60a5fa; }
 
   /* Compare dropdown */
   .ps-tryon-sr-compare { }
   .ps-tryon-sr-compare-select {
-    width: 100%; padding: 0.52vw 2vw 0.52vw 0.73vw; border: 1.5px solid #333; border-radius: 0.52vw;
+    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");
@@ -2508,6 +2466,15 @@ const STYLES = `
   }
   .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); }
 
   .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": "3.18.0",
+  "version": "3.20.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",