@primestyleai/tryon 3.15.0 → 3.16.0

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

@@ -306,6 +306,7 @@ const en = {
   "tap to compare": "tap to compare",
   "Comparing size": "Comparing size",
   "Fit Analysis": "Fit Analysis",
+  "Show more": "Show more",
   "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-B8Dg-nJ7.js";
-import { P, b, T, d, r } from "./index-B8Dg-nJ7.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-DvAzTRFF.js";
+import { P, b, T, d, r } from "./index-DvAzTRFF.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-B8Dg-nJ7.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-DvAzTRFF.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -406,20 +406,6 @@ 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() {
@@ -840,7 +826,107 @@ 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;
+    const sizeColIdx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
+    const idx = sizeColIdx >= 0 ? sizeColIdx : 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;
+      }
+      const fk = HEADER_MAP[clean];
+      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();
@@ -899,7 +985,7 @@ function PrimeStyleTryonInner({
     } finally {
       setSizingLoading(false);
     }
-  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields]);
+  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields, computeSizingLocally]);
   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");
@@ -1339,10 +1425,6 @@ function PrimeStyleTryonInner({
           ")"
         ] }, p.id))
       ] }) }),
-      /* @__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");
@@ -1599,13 +1681,30 @@ function PrimeStyleTryonInner({
             /* @__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)) })
-        ] }),
+        Object.keys(activeIntl).length > 0 && (() => {
+          const PRIMARY_CODES = ["US", "UK", "EU", "IT", "FR", "DE"];
+          const primary = PRIMARY_CODES.filter((c) => activeIntl[c]).map((c) => ({ code: c, val: activeIntl[c] }));
+          const rest = Object.entries(activeIntl).filter(([c]) => !PRIMARY_CODES.includes(c)).map(([code, val]) => ({ code, val }));
+          return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Equivalent Sizes") }),
+            primary.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-primary", children: primary.map((s) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-val", children: s.val }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-code", children: s.code })
+            ] }, s.code)) }),
+            rest.length > 0 && /* @__PURE__ */ jsxs("details", { className: "ps-tryon-sr-intl-more", children: [
+              /* @__PURE__ */ jsxs("summary", { className: "ps-tryon-sr-intl-more-btn", children: [
+                t("Show more"),
+                " (",
+                rest.length,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-grid", children: rest.map((s) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-item", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-code", children: s.code }),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-val", children: s.val })
+              ] }, s.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"),
@@ -2376,6 +2475,25 @@ const STYLES = `
   .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-primary { display: flex; flex-wrap: wrap; gap: 0.42vw; margin-bottom: 0.52vw; }
+  .ps-tryon-sr-intl-card {
+    flex: 1; min-width: 3.5vw; display: flex; flex-direction: column; align-items: center;
+    padding: 0.57vw 0.42vw; border: 1.5px solid #333; border-radius: 0.63vw;
+    background: #1a1b1a; transition: border-color 0.2s;
+  }
+  .ps-tryon-sr-intl-card:hover { border-color: #555; }
+  .ps-tryon-sr-intl-card-val { font-size: 1.04vw; font-weight: 800; color: #fff; line-height: 1.2; }
+  .ps-tryon-sr-intl-card-code { font-size: 0.57vw; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.1vw; }
+
+  .ps-tryon-sr-intl-more { }
+  .ps-tryon-sr-intl-more-btn {
+    font-size: 0.73vw; color: #bb945c; font-weight: 600; cursor: pointer;
+    list-style: none; margin-bottom: 0.42vw; font-family: inherit;
+  }
+  .ps-tryon-sr-intl-more-btn::-webkit-details-marker { display: none; }
+  .ps-tryon-sr-intl-more-btn::before { content: "▸ "; }
+  .ps-tryon-sr-intl-more[open] .ps-tryon-sr-intl-more-btn::before { content: "▾ "; }
+
   .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;

package/package.json

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