@primestyleai/tryon 3.9.1 → 3.10.0

package/dist/i18n/index.d.ts

@@ -15,6 +15,8 @@ export type TranslateFn = (key: string) => string;
 export declare const SUPPORTED_LOCALES: string[];
 /** Master list of translatable keys (= the English dictionary). */
 export declare const TRANSLATION_KEYS: string[];
+/** Human-readable labels for each bundled locale (in the locale's own language). */
+export declare const LOCALE_LABELS: Record<string, string>;
 /**
  * Register an external dictionary at runtime.
  * Useful for custom / community translations not bundled in the SDK.

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

@@ -2917,6 +2917,28 @@ const DICTIONARIES = {
 };
 const SUPPORTED_LOCALES = Object.keys(DICTIONARIES);
 const TRANSLATION_KEYS = Object.keys(en);
+const LOCALE_LABELS = {
+  en: "English",
+  es: "Español",
+  fr: "Français",
+  de: "Deutsch",
+  it: "Italiano",
+  sv: "Svenska",
+  ja: "日本語",
+  cs: "Čeština",
+  da: "Dansk",
+  nl: "Nederlands",
+  nb: "Norsk",
+  pl: "Polski",
+  "pt-br": "Português (BR)",
+  "pt-pt": "Português (PT)",
+  fi: "Suomi",
+  tr: "Türkçe",
+  th: "ไทย",
+  "zh-cn": "中文 (简体)",
+  "zh-tw": "中文 (繁體)",
+  ko: "한국어"
+};
 function registerLocale(locale, dict) {
   DICTIONARIES[locale.toLowerCase()] = dict;
 }
@@ -2939,6 +2961,7 @@ function createT(locale) {
 }
 export {
   ApiClient as A,
+  LOCALE_LABELS as L,
   PrimeStyleError as P,
   SseClient as S,
   TRANSLATION_KEYS as T,

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-B0KE3c8S.js";
-import { P, b, T, d, r } from "./index-B0KE3c8S.js";
+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";
 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 } from "../index-B0KE3c8S.js";
+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";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -515,6 +515,13 @@ function ChevronRightIcon() {
 function CheckIcon({ size = 14 }) {
   return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
 }
+function GlobeIcon({ size = 16 }) {
+  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("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+  ] });
+}
 function getApiKey() {
   const key = process.env.NEXT_PUBLIC_PRIMESTYLE_API_KEY ?? "";
   if (!key) throw new PrimeStyleError("Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY", "MISSING_API_KEY");
@@ -553,7 +560,11 @@ function PrimeStyleTryonInner({
   onError,
   sizeGuideData
 }) {
-  const t = useMemo(() => createT(locale), [locale]);
+  const [activeLocale, setActiveLocale] = useState(() => locale || "");
+  useEffect(() => {
+    if (locale !== void 0) setActiveLocale(locale);
+  }, [locale]);
+  const t = useMemo(() => createT(activeLocale || void 0), [activeLocale]);
   const resolvedButtonText = buttonText ?? t("Virtual Try-On");
   const [view, setView] = useState("idle");
   const [selectedFile, setSelectedFile] = useState(null);
@@ -1729,6 +1740,18 @@ 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))
+              }
+            )
+          ] }),
           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, {}) })
@@ -1813,6 +1836,23 @@ 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; }
+
   /* Stepper */
   .ps-tryon-stepper { padding: clamp(12px, 1.04vw, 20px) clamp(14px, 1.25vw, 24px) clamp(7px, 0.63vw, 12px); }
   .ps-tryon-stepper-track { display: flex; align-items: flex-start; }

package/package.json

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