@primestyleai/tryon 3.19.0 → 3.20.0

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

@@ -311,6 +311,7 @@ const en = {
   "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-DmAF7P54.js";
-import { P, b, T, d, r } from "./index-DmAF7P54.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-DmAF7P54.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() {
@@ -433,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" }),
@@ -1472,8 +1508,11 @@ 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 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()));
@@ -1508,7 +1547,6 @@ function PrimeStyleTryonInner({
     }, [sizeGuide, sizeColIdx]);
     const fitRows = useMemo(() => {
       if (!sizingResult?.matchDetails?.length) return [];
-      compareSize || sizingResult.recommendedSize || "";
       return sizingResult.matchDetails.map((m) => {
         const origNum = pNum(m.userValue);
         const edited = editVals[m.measurement];
@@ -1527,9 +1565,13 @@ function PrimeStyleTryonInner({
         return { area: m.measurement, userNum, chartLabel, fit };
       });
     }, [sizingResult, compareSize, editVals, chartRangeFor]);
-    const intlSizes = sizingResult?.internationalSizes || {};
-    const recSize = sizingResult?.recommendedSize || "";
-    const selSize = compareSize || recSize;
+    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" }),
@@ -1539,16 +1581,13 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero", children: [
           recSize && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-hero-badge", children: recSize }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero-info", children: [
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-hero-title", children: [
-              t("Your Size"),
-              recSize ? `: ${recSize}` : ""
-            ] }),
+            /* @__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: [
+        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(intlSizes).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
+          /* @__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)) })
@@ -1571,7 +1610,13 @@ function PrimeStyleTryonInner({
           ] })
         ] }),
         fitRows.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-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")
+            ] })
+          ] }),
           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 }),
@@ -1580,7 +1625,7 @@ function PrimeStyleTryonInner({
             /* @__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") }),
-                /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val-input-wrap", children: [
+                editing ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-val-input-wrap", children: [
                   /* @__PURE__ */ jsx(
                     "input",
                     {
@@ -1591,6 +1636,10 @@ function PrimeStyleTryonInner({
                     }
                   ),
                   /* @__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__ */ jsxs("div", { className: "ps-tryon-sr-fit-val", children: [
@@ -1888,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;
@@ -2358,6 +2407,17 @@ const STYLES = `
 
   /* 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;
   }

package/package.json

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