@primestyleai/tryon 3.10.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, b as SUPPORTED_LOCALES, L as LOCALE_LABELS } 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);
@@ -1707,6 +1694,42 @@ function PrimeStyleTryonInner({
       ] })
     ] }) });
   }
+  function LangSwitcher({ activeLocale: current, onSelect }) {
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const currentLabel = LOCALE_LABELS[current] || "English";
+    useEffect(() => {
+      if (!open) return;
+      const handler = (e) => {
+        if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    }, [open]);
+    return /* @__PURE__ */ jsxs("div", { ref, className: "ps-tryon-lang-wrap", children: [
+      /* @__PURE__ */ jsxs("button", { className: `ps-tryon-lang-trigger${open ? " ps-active" : ""}`, onClick: () => setOpen(!open), children: [
+        /* @__PURE__ */ jsx(GlobeIcon, { size: 15 }),
+        /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-current", children: currentLabel }),
+        /* @__PURE__ */ jsx("span", { className: `ps-tryon-lang-arrow${open ? " ps-open" : ""}`, children: "▾" })
+      ] }),
+      open && /* @__PURE__ */ jsx("div", { className: "ps-tryon-lang-dropdown", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-lang-list", children: SUPPORTED_LOCALES.map((code) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: `ps-tryon-lang-item${code === current ? " ps-selected" : ""}`,
+          onClick: () => {
+            onSelect(code);
+            setOpen(false);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-name", children: LOCALE_LABELS[code] || code }),
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-code", children: code.toUpperCase() }),
+            code === current && /* @__PURE__ */ jsx("span", { className: "ps-tryon-lang-check", children: /* @__PURE__ */ jsx(CheckIcon, { size: 12 }) })
+          ]
+        },
+        code
+      )) }) })
+    ] });
+  }
   function renderBody() {
     switch (view) {
       case "welcome":
@@ -1740,18 +1763,7 @@ function PrimeStyleTryonInner({
       /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
         /* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: t("Virtual Try-On") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-header-actions", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-lang-switcher", children: [
-            /* @__PURE__ */ jsx(GlobeIcon, {}),
-            /* @__PURE__ */ jsx(
-              "select",
-              {
-                value: activeLocale,
-                onChange: (e) => setActiveLocale(e.target.value),
-                className: "ps-tryon-lang-select",
-                children: SUPPORTED_LOCALES.map((code) => /* @__PURE__ */ jsx("option", { value: code, children: LOCALE_LABELS[code] || code }, code))
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
           profiles.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
           history.length > 0 && /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
           /* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
@@ -1837,21 +1849,63 @@ const STYLES = `
   .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
 
   /* Language switcher */
-  .ps-tryon-lang-switcher {
-    position: relative; display: flex; align-items: center; gap: clamp(3px, 0.21vw, 4px);
-    padding: clamp(3px, 0.26vw, 5px) clamp(6px, 0.52vw, 10px);
-    border: 1.5px solid #333; border-radius: clamp(6px, 0.52vw, 10px);
-    background: transparent; cursor: pointer; color: #999; transition: all 0.2s;
-  }
-  .ps-tryon-lang-switcher:hover { border-color: #bb945c; color: #bb945c; }
-  .ps-tryon-lang-switcher svg { stroke: currentColor; fill: none; flex-shrink: 0; }
-  .ps-tryon-lang-select {
-    appearance: none; -webkit-appearance: none; background: transparent; border: none;
-    color: inherit; font-size: clamp(9px, 0.57vw, 11px); font-family: inherit;
-    cursor: pointer; outline: none; padding-right: clamp(8px, 0.52vw, 10px);
-    max-width: clamp(70px, 5.2vw, 100px);
-  }
-  .ps-tryon-lang-select option { background: #1a1b1a; color: #fff; }
+  .ps-tryon-lang-wrap { position: relative; z-index: 10; }
+  .ps-tryon-lang-trigger {
+    display: flex; align-items: center; gap: clamp(5px, 0.36vw, 7px);
+    padding: clamp(5px, 0.36vw, 7px) clamp(10px, 0.73vw, 14px);
+    border: 1.5px solid #333; border-radius: clamp(8px, 0.57vw, 11px);
+    background: transparent; cursor: pointer; color: #999;
+    transition: all 0.25s ease; font-family: inherit; white-space: nowrap;
+  }
+  .ps-tryon-lang-trigger:hover, .ps-tryon-lang-trigger.ps-active {
+    border-color: #bb945c; color: #bb945c; background: rgba(187,148,92,0.06);
+  }
+  .ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; }
+  .ps-tryon-lang-current {
+    font-size: clamp(11px, 0.68vw, 13px); font-weight: 500; letter-spacing: 0.01em;
+  }
+  .ps-tryon-lang-arrow {
+    font-size: clamp(10px, 0.57vw, 12px); transition: transform 0.25s ease; display: inline-block;
+  }
+  .ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }
+
+  .ps-tryon-lang-dropdown {
+    position: absolute; top: calc(100% + clamp(6px, 0.42vw, 8px)); right: 0;
+    min-width: clamp(180px, 13vw, 240px);
+    background: #1a1b1a; border: 1.5px solid #333;
+    border-radius: clamp(10px, 0.73vw, 14px);
+    box-shadow: 0 clamp(12px, 1vw, 20px) clamp(40px, 3vw, 60px) rgba(0,0,0,0.5),
+                0 0 0 1px rgba(255,255,255,0.03);
+    overflow: hidden;
+    animation: ps-lang-open 0.2s ease both;
+  }
+  @keyframes ps-lang-open {
+    from { opacity: 0; transform: translateY(clamp(-6px, -0.42vw, -8px)) scale(0.96); }
+    to { opacity: 1; transform: translateY(0) scale(1); }
+  }
+
+  .ps-tryon-lang-list {
+    max-height: clamp(240px, 18vw, 340px); overflow-y: auto; padding: clamp(4px, 0.31vw, 6px);
+    scrollbar-width: thin; scrollbar-color: #333 transparent;
+  }
+  .ps-tryon-lang-item {
+    display: flex; align-items: center; gap: clamp(8px, 0.57vw, 12px);
+    width: 100%; padding: clamp(8px, 0.57vw, 11px) clamp(12px, 0.83vw, 16px);
+    border: none; background: transparent; color: #ccc; cursor: pointer;
+    border-radius: clamp(6px, 0.47vw, 9px); transition: all 0.15s ease;
+    font-family: inherit; text-align: left;
+  }
+  .ps-tryon-lang-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
+  .ps-tryon-lang-item.ps-selected { background: rgba(187,148,92,0.1); color: #bb945c; }
+  .ps-tryon-lang-name {
+    flex: 1; font-size: clamp(12px, 0.73vw, 14px); font-weight: 500;
+  }
+  .ps-tryon-lang-code {
+    font-size: clamp(9px, 0.52vw, 11px); color: #666; font-weight: 600;
+    letter-spacing: 0.05em; font-family: ui-monospace, monospace;
+  }
+  .ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #bb945c; opacity: 0.7; }
+  .ps-tryon-lang-check { color: #bb945c; display: flex; align-items: center; }
 
   /* Stepper */
   .ps-tryon-stepper { padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px) clamp(7px, 0.63vw, 12px); }
@@ -1977,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; }
@@ -2032,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.10.0",
+  "version": "3.12.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",