@primestyleai/tryon 3.11.0 → 3.12.0

package/dist/{index-71-uiSXC.js → index-25Bm_pob.js}

@@ -207,6 +207,7 @@ const en = {
   "Looking for size chart data for this product": "Looking for size chart data for this product",
   "How would you like to find your size?": "How would you like to find your size?",
   "Size guide is not available for this product — sizing will use standard measurements": "Size guide is not available for this product — sizing will use standard measurements",
+  "This product doesn't have a size guide — you can still see how it looks on you!": "This product doesn't have a size guide — you can still see how it looks on you!",
   "Size guide found for this product": "Size guide found for this product",
   "Enter my measurements": "Enter my measurements",
   "Chest, waist, hips, shoes & more": "Chest, waist, hips, shoes & more",

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-71-uiSXC.js";
-import { P, b, T, d, r } from "./index-71-uiSXC.js";
+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";
 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-71-uiSXC.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-25Bm_pob.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() {
@@ -1268,11 +1254,16 @@ function PrimeStyleTryonInner({
     }
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-choice", children: [
       /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: t("How would you like to find your size?") }),
-      sgChecked && !sgAvailable && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice", children: t("Size guide is not available for this product — sizing will use standard measurements") }),
-      sgChecked && sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice ps-tryon-sg-found", children: [
-        /* @__PURE__ */ jsx(CheckIcon, { size: 14 }),
-        " ",
-        t("Size guide found for this product")
+      sgChecked && !sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice", children: [
+        t("This product doesn't have a size guide — you can still see how it looks on you!"),
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sg-notice-cta", onClick: () => {
+          setSizingMethod(null);
+          setView("upload");
+        }, children: [
+          t("Try It On"),
+          " ",
+          /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
         /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
@@ -1331,28 +1322,24 @@ function PrimeStyleTryonInner({
           ")"
         ] }, p.id))
       ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: t("I'm shopping for") }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-toggle", children: [
-          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${!isFemale ? " ps-active" : ""}`, onClick: () => {
-            updateField("gender", "male");
-            setFormGender("male");
-          }, children: t("Men's") }),
-          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${isFemale ? " ps-active" : ""}`, onClick: () => {
-            updateField("gender", "female");
-            setFormGender("female");
-          }, children: t("Women's") })
+      sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-switch", children: [
+        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-unit-switch-btn${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: () => {
+          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" })
         ] })
       ] }),
-      /* @__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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: t("cm"), value: "cm" }, { label: t("in"), value: "in" }], value: sizingUnit, onChange: (v) => {
-        setSizingUnit(v);
-        setHeightUnit(v === "cm" ? "cm" : "ft");
-        setWeightUnit(v === "cm" ? "kg" : "lbs");
-      } }) }),
       sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
         const reqFields = dynamicFields.filter((f) => f.required);
         const optFields = dynamicFields.filter((f) => !f.required);
@@ -2044,13 +2031,19 @@ const STYLES = `
     background: rgba(187,148,92,0.12); color: #bb945c; font-size: clamp(8px, 0.52vw, 10px); font-weight: 600;
   }
   .ps-tryon-sg-notice {
-    font-size: clamp(9px, 0.63vw, 12px); color: #999; text-align: center; padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px);
-    margin-bottom: clamp(7px, 0.63vw, 12px); border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); background: #1a1b1a;
-  }
-  .ps-tryon-sg-found {
-    color: #4ade80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.05);
-    display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.31vw, 6px);
-  }
+    font-size: clamp(10px, 0.68vw, 13px); color: #999; text-align: center; padding: clamp(10px, 0.73vw, 14px) clamp(12px, 0.83vw, 16px);
+    margin-bottom: clamp(10px, 0.73vw, 14px); border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); background: #1a1b1a;
+    display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 0.57vw, 12px);
+  }
+  .ps-tryon-sg-notice-cta {
+    display: inline-flex; align-items: center; gap: clamp(4px, 0.31vw, 6px);
+    padding: clamp(6px, 0.42vw, 8px) clamp(14px, 1vw, 18px);
+    background: #bb945c; color: #111; border: none; border-radius: clamp(6px, 0.42vw, 8px);
+    font-size: clamp(10px, 0.68vw, 13px); font-weight: 700; cursor: pointer;
+    transition: all 0.2s; font-family: inherit;
+  }
+  .ps-tryon-sg-notice-cta:hover { background: #a07d4e; }
+  .ps-tryon-sg-notice-cta svg { stroke: #111; }
   .ps-tryon-sg-found svg { stroke: #4ade80; }
   .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 2.08vw, 40px) clamp(12px, 1.04vw, 20px); text-align: center; }
   .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: clamp(10px, 0.83vw, 16px); animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
@@ -2099,6 +2092,29 @@ const STYLES = `
     font-size: clamp(9px, 0.63vw, 12px); font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
   }
   .ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
+
+  /* Prominent unit switch (cm/in) */
+  .ps-tryon-unit-switch {
+    display: flex; gap: clamp(6px, 0.42vw, 8px); margin-bottom: clamp(10px, 0.83vw, 16px);
+  }
+  .ps-tryon-unit-switch-btn {
+    flex: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.16vw, 3px);
+    padding: clamp(10px, 0.73vw, 14px) clamp(8px, 0.57vw, 12px);
+    border: 2px solid #333; border-radius: clamp(10px, 0.73vw, 14px);
+    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 clamp(3px, 0.21vw, 4px) rgba(187,148,92,0.08);
+  }
+  .ps-tryon-unit-switch-label {
+    font-size: clamp(16px, 1.04vw, 20px); font-weight: 700; letter-spacing: 0.02em;
+  }
+  .ps-tryon-unit-switch-sub {
+    font-size: clamp(9px, 0.52vw, 11px); font-weight: 500; opacity: 0.6;
+  }
   .ps-tryon-section-label { font-size: clamp(8px, 0.57vw, 11px); font-weight: 700; color: #bb945c; text-transform: uppercase; letter-spacing: 0.08em; margin: clamp(2px, 0.21vw, 4px) 0 clamp(1px, 0.1vw, 2px); }
   .ps-tryon-optional-section { border-top: 1px solid #333; padding-top: clamp(6px, 0.52vw, 10px); margin-top: clamp(4px, 0.31vw, 6px); }
   .ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid #333; border-radius: clamp(6px, 0.52vw, 10px); padding: clamp(6px, 0.52vw, 10px) clamp(8px, 0.73vw, 14px); color: #999; font-size: clamp(10px, 0.68vw, 13px); font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }

package/package.json

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