@primestyleai/tryon 3.13.0 → 3.15.0

package/dist/{index-25Bm_pob.js → index-B8Dg-nJ7.js}

@@ -302,6 +302,10 @@ const en = {
   "Equivalent Sizes": "Equivalent Sizes",
   "Analyzing your size...": "Analyzing your size...",
   "Your size:": "Your size:",
+  "Size Chart": "Size Chart",
+  "tap to compare": "tap to compare",
+  "Comparing size": "Comparing size",
+  "Fit Analysis": "Fit Analysis",
   "Done": "Done",
   // ── Try-on result ───────────────────────────────────
   "Try-on result": "Try-on result",

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-25Bm_pob.js";
-import { P, b, T, d, r } from "./index-25Bm_pob.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-B8Dg-nJ7.js";
+import { P, b, T, d, r } from "./index-B8Dg-nJ7.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-25Bm_pob.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-B8Dg-nJ7.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -406,6 +406,20 @@ 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 SIZING_COUNTRIES = [
+  { code: "US", label: "United States" },
+  { code: "UK", label: "United Kingdom" },
+  { code: "EU", label: "Europe (EU)" },
+  { code: "FR", label: "France" },
+  { code: "IT", label: "Italy" },
+  { code: "DE", label: "Germany" },
+  { code: "ES", label: "Spain" },
+  { code: "JP", label: "Japan" },
+  { code: "CN", label: "China" },
+  { code: "KR", label: "South Korea" },
+  { code: "AU", label: "Australia" },
+  { code: "BR", label: "Brazil" }
+];
 const STEP_LABELS = ["", "Welcome", "Size", "Your Fit", "Try On"];
 const TOTAL_STEPS = 4;
 function detectLocale() {
@@ -424,6 +438,9 @@ 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);
 }
@@ -1322,23 +1339,21 @@ function PrimeStyleTryonInner({
           ")"
         ] }, p.id))
       ] }) }),
-      sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-switch", children: [
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-unit-switch-btn${isCm ? " ps-active" : ""}`, onClick: () => {
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+        /* @__PURE__ */ jsx("label", { children: t("Sizing region") }),
+        /* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: t(c.label) }, c.code)) })
+      ] }),
+      sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-tabs", children: [
+        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${isCm ? " ps-active" : ""}`, onClick: () => {
           setSizingUnit("cm");
           setHeightUnit("cm");
           setWeightUnit("kg");
-        }, children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-label", children: t("cm") }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-sub", children: "cm / kg" })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-unit-switch-btn${!isCm ? " ps-active" : ""}`, onClick: () => {
+        }, children: "CM" }),
+        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${!isCm ? " ps-active" : ""}`, onClick: () => {
           setSizingUnit("in");
           setHeightUnit("ft");
           setWeightUnit("lbs");
-        }, children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-label", children: t("in") }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-sub", children: "in / lbs" })
-        ] })
+        }, children: "Inches" })
       ] }),
       sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
         const reqFields = dynamicFields.filter((f) => f.required);
@@ -1462,13 +1477,13 @@ function PrimeStyleTryonInner({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: () => {
+      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: async () => {
         if (saveToggle && saveFormName.trim()) {
           saveProfile(saveFormName.trim());
         }
         setSizingLoading(true);
-        submitSizing();
         setView("size-result");
+        await submitSizing();
       }, children: [
         t("Get My Size"),
         " ",
@@ -1477,63 +1492,191 @@ function PrimeStyleTryonInner({
     ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function SizeResultView() {
-    const [showFitDetails, setShowFitDetails] = useState(false);
-    const confidenceLabel = sizingResult?.confidence === "high" ? t("High Confidence") : sizingResult?.confidence === "medium" ? t("Medium Confidence") : sizingResult?.confidence === "low" ? t("Low Confidence") : "";
-    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-result-view", children: [
-      sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend ps-tryon-sizing-loading", children: [
+    const [activeSize, setActiveSize] = useState(sizingResult?.recommendedSize || "");
+    const [editedValues, setEditedValues] = useState({});
+    const isCmResult = sizingUnit === "cm";
+    const chartData = useMemo(() => {
+      if (!sizeGuide?.found || !sizeGuide.headers || !sizeGuide.rows) return null;
+      const INTL = /* @__PURE__ */ new Set(["eu", "us", "uk", "it", "fr", "de", "jp", "cn", "kr", "au", "br", "eur"]);
+      const MEAS_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",
+        "neck circumference": "neckCircumference",
+        foot: "footLengthCm",
+        "foot length": "footLengthCm"
+      };
+      const sizeColIdx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
+      const idx = sizeColIdx >= 0 ? sizeColIdx : 0;
+      const measCols = [];
+      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({ headerIdx: i, code: clean.toUpperCase() });
+        } else if (MEAS_MAP[clean]) {
+          measCols.push({ headerIdx: i, label: h.trim(), formKey: MEAS_MAP[clean] });
+        } else if (lower !== "size") {
+          measCols.push({ headerIdx: i, label: h.trim(), formKey: lower.replace(/\s+/g, "") });
+        }
+      });
+      const sizes = sizeGuide.rows.map((row) => {
+        const label = row[idx] || "";
+        const measurements = {};
+        for (const col of measCols) {
+          const cell = row[col.headerIdx] || "";
+          const nums = cell.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
+          if (nums.length > 0) {
+            measurements[col.formKey] = { raw: cell, min: Math.min(...nums), max: Math.max(...nums) };
+          }
+        }
+        const intl = {};
+        for (const col of intlCols) {
+          if (row[col.headerIdx]) intl[col.code] = row[col.headerIdx];
+        }
+        return { label, measurements, intl };
+      });
+      return { sizes, measCols, intlCols };
+    }, [sizeGuide]);
+    const getUserVal = useCallback((formKey2) => {
+      const edited = editedValues[formKey2];
+      if (edited !== void 0 && edited !== "") {
+        const v2 = parseFloat(edited);
+        return isNaN(v2) ? null : isCmResult ? v2 : inToCm(v2);
+      }
+      const raw = formRef.current[formKey2];
+      if (!raw) return null;
+      const v = parseFloat(raw);
+      return isNaN(v) ? null : isCmResult ? v : inToCm(v);
+    }, [editedValues, isCmResult]);
+    const activeFit = useMemo(() => {
+      if (!chartData) return null;
+      const sizeRow = chartData.sizes.find((s) => s.label === activeSize);
+      if (!sizeRow) return null;
+      const details = [];
+      for (const col of chartData.measCols) {
+        const range = sizeRow.measurements[col.formKey];
+        if (!range) continue;
+        const userVal = getUserVal(col.formKey);
+        if (userVal === null) continue;
+        const fit = userVal >= range.min && userVal <= range.max ? "good" : userVal < range.min ? "tight" : "loose";
+        details.push({ label: col.label, formKey: col.formKey, userVal, chartMin: range.min, chartMax: range.max, chartRaw: range.raw, fit });
+      }
+      return details;
+    }, [chartData, activeSize, getUserVal]);
+    const activeIntl = useMemo(() => {
+      if (!chartData) return sizingResult?.internationalSizes || {};
+      const sizeRow = chartData.sizes.find((s) => s.label === activeSize);
+      return sizeRow?.intl || sizingResult?.internationalSizes || {};
+    }, [chartData, activeSize, sizingResult]);
+    const fmtRange = (min, max) => {
+      if (isCmResult) return min === max ? `${Math.round(min)}` : `${Math.round(min)}–${Math.round(max)}`;
+      return min === max ? `${cmToIn(min)}` : `${cmToIn(min)}–${cmToIn(max)}`;
+    };
+    const unitLabel = isCmResult ? t("cm") : t("in");
+    const isRecommended = activeSize === sizingResult?.recommendedSize;
+    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", { className: "ps-tryon-size-reasoning", children: t("Analyzing your size...") })
+        /* @__PURE__ */ jsx("p", { children: t("Analyzing your size...") })
       ] }),
       sizingResult && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
-          /* @__PURE__ */ jsx("h3", { className: "ps-tryon-size-title", children: t("Your Size") }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-hero-row", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
-            /* @__PURE__ */ jsx("span", { className: `ps-tryon-size-conf-label ps-conf-${sizingResult.confidence}`, children: confidenceLabel })
-          ] }),
-          sizingResult.sections && Object.keys(sizingResult.sections).length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-multi-section", children: [
-            /* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: t("Sizing by Garment") }),
-            Object.entries(sizingResult.sections).map(([name, sec]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-section-row", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-section-name", children: name }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-size-badge ps-tryon-section-badge", children: sec.recommendedSize })
-            ] }, name))
-          ] }),
-          sizingResult.matchDetails && sizingResult.matchDetails.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-summary", children: [
-            /* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: t("Fit Summary") }),
-            sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-row", children: [
-              /* @__PURE__ */ jsx("span", { className: `ps-tryon-fit-icon ps-fit-icon-${m.fit}`, children: m.fit === "good" ? "✓" : m.fit === "tight" ? "↑" : "↓" }),
-              /* @__PURE__ */ jsxs("span", { className: "ps-tryon-fit-text", children: [
-                /* @__PURE__ */ jsx("strong", { children: m.measurement }),
-                " ",
-                m.fit === "good" ? t("within range") : m.fit === "tight" ? t("may be snug") : t("may be loose")
-              ] })
-            ] }, i)),
-            /* @__PURE__ */ jsx("button", { className: "ps-tryon-fit-details-toggle", onClick: () => setShowFitDetails(!showFitDetails), children: showFitDetails ? `${t("Hide details")} ↑` : `${t("See details")} ↓` }),
-            showFitDetails && /* @__PURE__ */ jsxs("table", { className: "ps-tryon-fit-table", children: [
-              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                /* @__PURE__ */ jsx("th", { children: t("Area") }),
-                /* @__PURE__ */ jsx("th", { children: t("You") }),
-                /* @__PURE__ */ jsx("th", { children: t("Chart") }),
-                /* @__PURE__ */ jsx("th", { children: t("Fit") })
-              ] }) }),
-              /* @__PURE__ */ jsx("tbody", { children: sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("tr", { children: [
-                /* @__PURE__ */ jsx("td", { children: m.measurement }),
-                /* @__PURE__ */ jsx("td", { children: m.userValue }),
-                /* @__PURE__ */ jsx("td", { children: m.chartRange }),
-                /* @__PURE__ */ jsx("td", { className: `ps-fit-${m.fit}`, children: m.fit })
-              ] }, i)) })
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge", children: sizingResult.recommendedSize }),
+          /* @__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(activeIntl).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-grid", children: Object.entries(activeIntl).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-item", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-code", children: code }),
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-val", children: val })
+          ] }, code)) })
+        ] }),
+        chartData && chartData.sizes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-sizes", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-label", children: [
+            t("Size Chart"),
+            " ",
+            /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-label-hint", children: [
+              "— ",
+              t("tap to compare")
             ] })
           ] }),
-          sizingResult.internationalSizes && Object.keys(sizingResult.internationalSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-equiv-section", children: [
-            /* @__PURE__ */ jsx("h4", { className: "ps-tryon-equiv-title", children: t("Equivalent Sizes") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-equiv-chips", children: Object.entries(sizingResult.internationalSizes).map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-equiv-chip", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-equiv-region", children: k }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-equiv-value", children: v })
-            ] }, k)) })
-          ] }),
-          (!sizingResult.matchDetails || sizingResult.matchDetails.length === 0) && sizingResult.reasoning && /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: sizingResult.reasoning })
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-size-row", children: chartData.sizes.map((s) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setActiveSize(s.label),
+              className: `ps-tryon-sr-size-chip${s.label === activeSize ? " ps-active" : ""}${s.label === sizingResult.recommendedSize ? " ps-recommended" : ""}`,
+              children: [
+                s.label,
+                s.label === sizingResult.recommendedSize && /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-rec-dot" })
+              ]
+            },
+            s.label
+          )) }),
+          !isRecommended && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-comparing", children: [
+            t("Comparing size"),
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: activeSize })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-tryon-cta", children: [
+        activeFit && activeFit.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Fit Analysis") }),
+          /* @__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__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-you", children: [
+                t("You"),
+                " (",
+                unitLabel,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-chart", children: [
+                t("Chart"),
+                " (",
+                unitLabel,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
+            ] }),
+            activeFit.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.label }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "number",
+                  className: "ps-tryon-sr-fit-input",
+                  defaultValue: isCmResult ? Math.round(row.userVal) : cmToIn(row.userVal),
+                  onBlur: (e) => {
+                    const val = e.target.value;
+                    setEditedValues((prev) => ({ ...prev, [row.formKey]: val }));
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: fmtRange(row.chartMin, row.chartMax) }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsxs("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: [
+                row.fit === "good" ? "✓" : row.fit === "tight" ? "↑" : "↓",
+                " ",
+                row.fit === "good" ? t("within range") : row.fit === "tight" ? t("may be snug") : t("may be loose")
+              ] }) })
+            ] }, i))
+          ] })
+        ] }),
+        (!activeFit || activeFit.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"),
             " ",
@@ -2093,27 +2236,21 @@ const STYLES = `
   }
   .ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
 
-  /* Prominent unit switch (cm/in) */
-  .ps-tryon-unit-switch {
-    display: flex; gap: 0.42vw; margin-bottom: 0.83vw;
-  }
-  .ps-tryon-unit-switch-btn {
-    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.16vw;
-    padding: 0.73vw 0.57vw;
-    border: 2px solid #333; border-radius: 0.73vw;
-    background: transparent; color: #666; cursor: pointer;
-    transition: all 0.25s ease; font-family: inherit;
-  }
-  .ps-tryon-unit-switch-btn:hover { border-color: #555; color: #999; }
-  .ps-tryon-unit-switch-btn.ps-active {
-    border-color: #bb945c; background: rgba(187,148,92,0.08); color: #bb945c;
-    box-shadow: 0 0 0 0.21vw rgba(187,148,92,0.08);
-  }
-  .ps-tryon-unit-switch-label {
-    font-size: 1.04vw; font-weight: 700; letter-spacing: 0.02em;
-  }
-  .ps-tryon-unit-switch-sub {
-    font-size: 0.52vw; font-weight: 500; opacity: 0.6;
+  /* Unit tabs (cm / inches) */
+  .ps-tryon-unit-tabs {
+    display: flex; gap: 0; background: #1a1b1a; border: 1.5px solid #333;
+    border-radius: 0.63vw; overflow: hidden; margin-bottom: 0.83vw;
+  }
+  .ps-tryon-unit-tab {
+    flex: 1; padding: 0.57vw 0.83vw; background: transparent; border: none;
+    color: #666; font-size: 0.78vw; font-weight: 700; cursor: pointer;
+    transition: all 0.2s ease; font-family: inherit; letter-spacing: 0.04em;
+    position: relative;
+  }
+  .ps-tryon-unit-tab:first-child { border-right: 1px solid #333; }
+  .ps-tryon-unit-tab:hover { color: #999; background: rgba(255,255,255,0.03); }
+  .ps-tryon-unit-tab.ps-active {
+    background: #bb945c; color: #111;
   }
   .ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: #bb945c; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }
   .ps-tryon-optional-section { border-top: 1px solid #333; padding-top: 0.52vw; margin-top: 0.31vw; }
@@ -2207,79 +2344,120 @@ const STYLES = `
   .ps-tryon-btn-retry { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid #333 !important; }
   .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
 
-  /* Size recommendation */
-  .ps-tryon-size-recommend { margin-bottom: 0.83vw; }
-  .ps-tryon-size-title { font-size: 0.94vw; font-weight: 700; color: #fff; margin: 0 0 0.73vw; }
-  .ps-tryon-size-hero-row {
-    display: flex; align-items: center; gap: 0.83vw; padding: 0.83vw 1.04vw;
-    border: 1.5px solid #333; border-radius: 0.73vw; margin-bottom: 0.94vw; background: rgba(255,255,255,0.02);
-  }
-  .ps-tryon-size-badge {
-    display: inline-flex; align-items: center; justify-content: center;
-    min-width: 2.92vw; height: 2.92vw; padding: 0 0.63vw; border-radius: 0.63vw;
-    background: linear-gradient(135deg, #bb945c, #d6ba7d);
-    color: #111; font-size: 1.25vw; font-weight: 800; letter-spacing: -0.02em;
-  }
-  .ps-tryon-size-conf-label { font-size: 0.78vw; font-weight: 600; }
-  .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
-
-  .ps-tryon-sizing-loading { text-align: center; padding: 1.04vw 0; }
+  /* ── Size Result (redesigned) ── */
+  .ps-tryon-sr { display: flex; flex-direction: column; gap: 1.1vw; }
+  .ps-tryon-sr-loading { text-align: center; padding: 2vw 0; }
+  .ps-tryon-sr-loading p { font-size: 0.83vw; color: #999; margin-top: 0.5vw; }
   .ps-tryon-size-loading-spinner {
-    width: 1.88vw; height: 1.88vw; border: 3px solid #333;
+    width: 2vw; height: 2vw; border: 3px solid #333;
     border-top-color: #bb945c; border-radius: 50%;
-    animation: ps-spin 0.8s linear infinite; margin: 0 auto 0.63vw;
+    animation: ps-spin 0.8s linear infinite; margin: 0 auto;
   }
   @keyframes ps-spin { to { transform: rotate(360deg); } }
 
-  /* Fit Summary */
-  .ps-tryon-fit-summary { margin-bottom: 0.83vw; }
-  .ps-tryon-fit-summary-title { font-size: 0.78vw; font-weight: 700; color: #fff; margin: 0 0 0.52vw; }
-  .ps-tryon-fit-row { display: flex; align-items: center; gap: 0.52vw; padding: 0.42vw 0; }
-  .ps-tryon-fit-icon {
-    width: 1.15vw; height: 1.15vw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
-    font-size: 0.63vw; font-weight: 700; flex-shrink: 0;
-  }
-  .ps-fit-icon-good { background: rgba(74,222,128,0.15); color: #4ade80; }
-  .ps-fit-icon-tight { background: rgba(245,158,11,0.15); color: #f59e0b; }
-  .ps-fit-icon-loose { background: rgba(96,165,250,0.15); color: #60a5fa; }
-  .ps-tryon-fit-text { font-size: 0.73vw; color: #ccc; line-height: 1.4; }
-  .ps-tryon-fit-text strong { color: #fff; font-weight: 600; }
-  .ps-tryon-fit-details-toggle {
-    display: inline-block; margin-top: 0.42vw; font-size: 0.68vw; color: #bb945c; cursor: pointer;
-    font-weight: 600; background: none; border: none; padding: 0; font-family: inherit;
-  }
-  .ps-tryon-fit-details-toggle:hover { color: #d6ba7d; }
-  .ps-tryon-fit-table { width: 100%; border-collapse: collapse; margin-top: 0.52vw; font-size: 0.68vw; }
-  .ps-tryon-fit-table th { text-align: left; padding: 0.42vw 0.52vw; border-bottom: 1px solid #333; color: #999; font-weight: 600; }
-  .ps-tryon-fit-table td { padding: 0.42vw 0.52vw; border-bottom: 1px solid #222; color: #ccc; }
-  .ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
+  /* Hero */
+  .ps-tryon-sr-hero {
+    display: flex; align-items: center; gap: 1vw; padding: 1vw 1.2vw;
+    background: linear-gradient(135deg, rgba(187,148,92,0.08), rgba(187,148,92,0.02));
+    border: 1.5px solid rgba(187,148,92,0.25); border-radius: 0.83vw;
+  }
+  .ps-tryon-sr-hero-badge {
+    min-width: 3.5vw; height: 3.5vw; display: flex; align-items: center; justify-content: center;
+    background: linear-gradient(135deg, #bb945c, #d6ba7d); color: #111;
+    font-size: 1.5vw; font-weight: 800; border-radius: 0.73vw; letter-spacing: -0.02em;
+    padding: 0 0.8vw; box-shadow: 0 0.4vw 1.2vw rgba(187,148,92,0.25);
+  }
+  .ps-tryon-sr-hero-info { flex: 1; }
+  .ps-tryon-sr-hero-title { font-size: 1.04vw; font-weight: 700; color: #fff; margin-bottom: 0.15vw; }
+  .ps-tryon-sr-hero-conf { font-size: 0.78vw; font-weight: 600; }
+  .ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
 
-  /* Equivalent Sizes */
-  .ps-tryon-equiv-section { margin-bottom: 0.83vw; }
-  .ps-tryon-equiv-title { font-size: 0.78vw; font-weight: 700; color: #fff; margin: 0 0 0.52vw; }
-  .ps-tryon-equiv-chips { display: flex; flex-wrap: wrap; gap: 0.42vw; }
-  .ps-tryon-equiv-chip {
+  /* International sizes */
+  .ps-tryon-sr-intl { }
+  .ps-tryon-sr-label { font-size: 0.78vw; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.52vw; }
+  .ps-tryon-sr-label-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #666; font-style: italic; }
+  .ps-tryon-sr-intl-grid { display: flex; flex-wrap: wrap; gap: 0.42vw; }
+  .ps-tryon-sr-intl-item {
     display: flex; align-items: center; border: 1.5px solid #333; border-radius: 0.52vw; overflow: hidden;
   }
-  .ps-tryon-equiv-region { padding: 0.36vw 0.52vw; font-size: 0.63vw; color: #999; font-weight: 600; background: rgba(255,255,255,0.03); }
-  .ps-tryon-equiv-value { padding: 0.36vw 0.63vw; font-size: 0.73vw; color: #fff; font-weight: 700; }
+  .ps-tryon-sr-intl-code { padding: 0.42vw 0.57vw; font-size: 0.68vw; color: #999; font-weight: 700; background: rgba(255,255,255,0.03); letter-spacing: 0.04em; }
+  .ps-tryon-sr-intl-val { padding: 0.42vw 0.68vw; font-size: 0.83vw; color: #fff; font-weight: 700; }
 
-  /* Multi-section garment sizing (tuxedo/set) */
-  .ps-tryon-multi-section { margin-bottom: 0.83vw; }
-  .ps-tryon-section-row { display: flex; align-items: center; justify-content: space-between; padding: 0.52vw 0; border-bottom: 1px solid #222; }
-  .ps-tryon-section-row:last-child { border-bottom: none; }
-  .ps-tryon-section-name { font-size: 0.78vw; color: #ccc; font-weight: 500; }
-  .ps-tryon-section-badge { font-size: 0.83vw; min-width: auto; padding: 0.26vw 0.83vw; }
+  /* Size selector */
+  .ps-tryon-sr-sizes { }
+  .ps-tryon-sr-size-row { display: flex; flex-wrap: wrap; gap: 0.36vw; }
+  .ps-tryon-sr-size-chip {
+    position: relative; min-width: 2.6vw; height: 2.4vw; padding: 0 0.73vw;
+    display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid #333; border-radius: 0.52vw; background: transparent;
+    color: #999; font-size: 0.83vw; font-weight: 600; cursor: pointer;
+    transition: all 0.2s; font-family: inherit;
+  }
+  .ps-tryon-sr-size-chip:hover { border-color: #555; color: #ccc; }
+  .ps-tryon-sr-size-chip.ps-active {
+    border-color: #bb945c; background: #bb945c; color: #111;
+    box-shadow: 0 0.2vw 0.8vw rgba(187,148,92,0.2);
+  }
+  .ps-tryon-sr-size-chip.ps-recommended { border-color: rgba(187,148,92,0.4); }
+  .ps-tryon-sr-rec-dot {
+    position: absolute; bottom: -0.26vw; left: 50%; transform: translateX(-50%);
+    width: 0.31vw; height: 0.31vw; border-radius: 50%; background: #bb945c;
+  }
+  .ps-tryon-sr-size-chip.ps-active .ps-tryon-sr-rec-dot { background: #111; }
+  .ps-tryon-sr-comparing { font-size: 0.73vw; color: #bb945c; margin-top: 0.42vw; }
+  .ps-tryon-sr-comparing strong { color: #d6ba7d; }
 
-  .ps-tryon-size-reasoning { font-size: 0.73vw; color: #ccc; line-height: 1.6; margin-bottom: 0.73vw; }
+  /* 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; }
 
-  /* Size Result View (standalone sizing result before try-on) */
-  .ps-tryon-size-result-view { display: flex; flex-direction: column; gap: 1vw; }
-  .ps-tryon-tryon-cta { display: flex; flex-direction: column; gap: 0.7vw; margin-top: 0.7vw; }
+  .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; }
+
+  .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;
+    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-badge {
+    display: inline-flex; align-items: center; gap: 0.26vw; padding: 0.21vw 0.52vw;
+    border-radius: 0.36vw; font-size: 0.63vw; 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; }
+
+  /* Reasoning fallback */
+  .ps-tryon-sr-reasoning { padding: 0.83vw; border: 1px solid #333; border-radius: 0.63vw; background: #1a1b1a; }
+  .ps-tryon-sr-reasoning p { font-size: 0.78vw; color: #ccc; line-height: 1.6; margin: 0; }
+
+  /* CTAs */
+  .ps-tryon-sr-ctas { display: flex; flex-direction: column; gap: 0.52vw; margin-top: 0.36vw; }
   .ps-tryon-btn-secondary {
     background: transparent; border: 1.5px solid #444; color: #999; font-size: 0.83vw;
-    font-weight: 600; padding: 0.7vw 1.3vw; border-radius: 0.52vw;
-    cursor: pointer; transition: all 0.2s;
+    font-weight: 600; padding: 0.73vw 1.3vw; border-radius: 0.52vw;
+    cursor: pointer; transition: all 0.2s; font-family: inherit;
   }
   .ps-tryon-btn-secondary:hover { border-color: #666; color: #ccc; }
   .ps-tryon-size-compact { padding: 0.5vw 0; }

package/package.json

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