@primestyleai/tryon 3.9.2 → 3.11.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, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } 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);
@@ -1696,6 +1707,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":
@@ -1729,6 +1776,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__ */ 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, {}) })
@@ -1813,6 +1861,65 @@ const STYLES = `
   }
   .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
 
+  /* Language switcher */
+  .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); }
   .ps-tryon-stepper-track { display: flex; align-items: flex-start; }

package/package.json

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