@primestyleai/tryon 2.3.0 → 3.1.0

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties } from "react";
-import type { ButtonStyles, ModalStyles, PrimeStyleClassNames, SizeGuideData } from "../types";
+import type { ButtonStyles, ModalStyles, PrimeStyleClassNames } from "../types";
 export interface PrimeStyleTryonProps {
     productImage: string;
     productTitle?: string;
@@ -23,27 +23,7 @@ export interface PrimeStyleTryonProps {
         message: string;
         code?: string;
     }) => void;
-    /** Pre-computed size guide — skips AI extraction if provided */
-    sizeGuide?: SizeGuideData;
-    /** Product description HTML for AI size guide extraction */
-    productDescription?: string;
-    /** Product vendor/brand for AI extraction */
-    productVendor?: string;
-    /** Product type (e.g. "T-Shirt", "Jacket") */
-    productType?: string;
-    /** Product tags for AI extraction */
-    productTags?: string[];
-    /** Product variants with size options */
-    productVariants?: Array<{
-        title: string;
-        option1?: string | null;
-        option2?: string | null;
-        option3?: string | null;
-    }>;
-    /** Product options (e.g. [{name: "Size", values: ["S","M","L"]}]) */
-    productOptions?: Array<{
-        name: string;
-        values?: string[];
-    }>;
+    /** Size guide data from your backend — pass as-is, any format (HTML, JSON, object, string). Our AI will parse it. */
+    sizeGuideData?: unknown;
 }
 export declare function PrimeStyleTryon(props: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/index.js

@@ -179,13 +179,7 @@ function PrimeStyleTryonInner({
   onProcessing,
   onComplete,
   onError,
-  sizeGuide: sizeGuideProp,
-  productDescription,
-  productVendor,
-  productType,
-  productTags,
-  productVariants,
-  productOptions
+  sizeGuideData
 }) {
   const [view, setView] = useState("idle");
   const [selectedFile, setSelectedFile] = useState(null);
@@ -193,9 +187,6 @@ function PrimeStyleTryonInner({
   const [resultImageUrl, setResultImageUrl] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const [dragOver, setDragOver] = useState(false);
-  const countdownRef = useRef(25);
-  const countdownElRef = useRef(null);
-  const countdownCircleRef = useRef(null);
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
   const [sizeGuide, setSizeGuide] = useState(null);
@@ -208,6 +199,7 @@ function PrimeStyleTryonInner({
   const [weightUnit, setWeightUnit] = useState(imperial ? "lbs" : "kg");
   const formRef = useRef({});
   const [formGender, setFormGender] = useState("male");
+  const [formKey, setFormKey] = useState(0);
   const [profiles, setProfiles] = useState(() => lsGet("profiles", []));
   const [history, setHistory] = useState(() => lsGet("history", []));
   const [activeProfileId, setActiveProfileId] = useState(null);
@@ -246,15 +238,33 @@ function PrimeStyleTryonInner({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  const progressRef = useRef(0);
+  const progressBarRef = useRef(null);
+  const progressTextRef = useRef(null);
+  const progressStatusRef = useRef(null);
   useEffect(() => {
     if (view === "processing") {
-      countdownRef.current = 25;
+      progressRef.current = 0;
+      const statuses = [
+        { at: 0, text: "Preparing your image..." },
+        { at: 15, text: "Analyzing body proportions..." },
+        { at: 30, text: "Matching garment to your photo..." },
+        { at: 50, text: "Generating virtual try-on..." },
+        { at: 75, text: "Refining details..." },
+        { at: 90, text: "Almost there..." }
+      ];
       const interval = setInterval(() => {
-        countdownRef.current -= 1;
-        if (countdownElRef.current) countdownElRef.current.textContent = String(Math.max(countdownRef.current, 0));
-        if (countdownCircleRef.current) countdownCircleRef.current.style.strokeDashoffset = `${Math.max(countdownRef.current, 0) / 25 * 326.73}`;
-        if (countdownRef.current <= 0) clearInterval(interval);
-      }, 1e3);
+        const p = progressRef.current;
+        const increment = p < 30 ? 1.2 : p < 60 ? 0.8 : p < 80 ? 0.4 : p < 95 ? 0.15 : 0;
+        progressRef.current = Math.min(p + increment, 95);
+        const val = Math.round(progressRef.current);
+        if (progressBarRef.current) progressBarRef.current.style.width = `${val}%`;
+        if (progressTextRef.current) progressTextRef.current.textContent = `${val}%`;
+        if (progressStatusRef.current) {
+          const status = [...statuses].reverse().find((s) => val >= s.at);
+          if (status) progressStatusRef.current.textContent = status.text;
+        }
+      }, 200);
       return () => clearInterval(interval);
     }
   }, [view]);
@@ -290,31 +300,22 @@ function PrimeStyleTryonInner({
   useEffect(() => {
     if (view !== "sizing-choice" || sizeGuideFetchedRef.current || !apiRef.current) return;
     sizeGuideFetchedRef.current = true;
-    if (sizeGuideProp) {
-      setSizeGuide(sizeGuideProp);
+    if (!sizeGuideData) {
+      setSizeGuide({ found: false });
       return;
     }
     setSizeGuideFetching(true);
     const baseUrl = getApiUrl(apiUrl);
     const key = getApiKey();
-    const productPayload = {
-      title: productTitle,
-      variants: productVariants || []
-    };
-    if (productDescription) productPayload.description = productDescription;
-    if (productVendor) productPayload.vendor = productVendor;
-    if (productType) productPayload.productType = productType;
-    if (productTags?.length) productPayload.tags = productTags;
-    if (productOptions?.length) productPayload.options = productOptions;
     fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
       method: "POST",
       headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
-      body: JSON.stringify({ product: productPayload })
+      body: JSON.stringify({ product: { title: productTitle }, sizeGuideRaw: sizeGuideData })
     }).then((r) => r.ok ? r.json() : null).then((data) => {
       if (data) setSizeGuide(data);
       else setSizeGuide({ found: false });
     }).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
-  }, [view, apiUrl, productTitle, sizeGuideProp]);
+  }, [view, apiUrl, productTitle, sizeGuideData]);
   const stepIndex = useMemo(() => {
     switch (view) {
       case "welcome":
@@ -400,8 +401,12 @@ function PrimeStyleTryonInner({
       });
       if (!completedRef.current) {
         completedRef.current = true;
+        progressRef.current = 100;
+        if (progressBarRef.current) progressBarRef.current.style.width = "100%";
+        if (progressTextRef.current) progressTextRef.current.textContent = "100%";
+        if (progressStatusRef.current) progressStatusRef.current.textContent = "Complete!";
         cleanupJob();
-        setView("result");
+        setTimeout(() => setView("result"), 400);
         onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
       }
     } else if (update.status === "failed") {
@@ -422,14 +427,7 @@ function PrimeStyleTryonInner({
     const payload = {
       method: sizingMethod,
       locale: sizingCountry,
-      product: {
-        title: productTitle,
-        description: productDescription || "",
-        variants: productVariants || [],
-        ...productVendor && { vendor: productVendor },
-        ...productType && { productType },
-        ...productTags?.length && { tags: productTags }
-      }
+      product: { title: productTitle, description: "", variants: [] }
     };
     if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
     if (sizingMethod === "exact") {
@@ -563,6 +561,11 @@ function PrimeStyleTryonInner({
     if (p.fitPreference) fd.fitPreference = p.fitPreference;
     formRef.current = fd;
     setFormGender(fd.gender || "male");
+    if (p.country) setSizingCountry(p.country);
+    if (p.sizingUnit) setSizingUnit(p.sizingUnit);
+    if (p.heightUnit) setHeightUnit(p.heightUnit);
+    if (p.weightUnit) setWeightUnit(p.weightUnit);
+    setFormKey((k) => k + 1);
   }, [profiles]);
   const saveProfile = useCallback((name) => {
     const id = activeProfileId || `p_${Date.now()}`;
@@ -585,6 +588,10 @@ function PrimeStyleTryonInner({
       shoeUS: formRef.current.shoeUS,
       shoeUK: formRef.current.shoeUK,
       fitPreference: formRef.current.fitPreference,
+      country: sizingCountry,
+      sizingUnit,
+      heightUnit,
+      weightUnit,
       createdAt: Date.now()
     };
     setProfiles((prev) => {
@@ -598,7 +605,7 @@ function PrimeStyleTryonInner({
     });
     setActiveProfileId(id);
     setProfileSaved(true);
-  }, [activeProfileId]);
+  }, [activeProfileId, sizingCountry, sizingUnit, heightUnit, weightUnit]);
   const saveHistoryEntry = useCallback(() => {
     const entry = {
       id: `h_${Date.now()}`,
@@ -849,7 +856,11 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsx("label", { children: "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: c.label }, c.code)) })
       ] }),
-      sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: setSizingUnit }) }),
+      sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: (v) => {
+        setSizingUnit(v);
+        setHeightUnit(v === "cm" ? "cm" : "ft");
+        setWeightUnit(v === "cm" ? "kg" : "lbs");
+      } }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
         /* @__PURE__ */ jsx("label", { children: "Height" }),
         heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
@@ -905,18 +916,20 @@ function PrimeStyleTryonInner({
         "Get My Size & Try On ",
         /* @__PURE__ */ jsx(ArrowRightIcon, {})
       ] })
-    ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}`);
+    ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function ProcessingView() {
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
-        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 120", children: [
-          /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-track", cx: "60", cy: "60", r: "52" }),
-          /* @__PURE__ */ jsx("circle", { ref: countdownCircleRef, className: "ps-tryon-countdown-progress", cx: "60", cy: "60", r: "52", style: { strokeDashoffset: `${25 / 25 * 326.73}` } })
-        ] }),
-        /* @__PURE__ */ jsx("span", { ref: countdownElRef, className: "ps-tryon-countdown-number", children: "25" })
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
+        previewUrl && /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: "ps-tryon-processing-model" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-line" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-text", cn.processingText), children: "Generating your try-on..." }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: progressBarRef, className: "ps-tryon-progress-bar-fill", style: { width: "0%" } }) }),
+        /* @__PURE__ */ jsx("span", { ref: progressTextRef, className: "ps-tryon-progress-pct", children: "0%" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { ref: progressStatusRef, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
       /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
     ] });
   }
@@ -1346,19 +1359,49 @@ const STYLES = `
   .ps-tryon-disclaimer { font-size: 11px; color: #666; margin: 4px 0 0; }
 
   /* Processing */
-  .ps-tryon-processing { text-align: center; padding: 40px 24px; }
-  .ps-tryon-spinner {
-    width: 48px; height: 48px; border: 3px solid #333;
-    border-top-color: var(--ps-loader, #bb945c); border-radius: 50%;
-    animation: ps-spin 0.8s linear infinite; margin: 0 auto 16px;
+  .ps-tryon-processing { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
+
+  .ps-tryon-processing-image-wrap {
+    position: relative; width: 200px; height: 260px; margin: 0 auto 24px;
+    border-radius: 16px; overflow: hidden; border: 2px solid #333;
+  }
+  .ps-tryon-processing-model {
+    width: 100%; height: 100%; object-fit: cover; display: block;
+  }
+  .ps-tryon-scan-overlay {
+    position: absolute; inset: 0;
+    background: linear-gradient(180deg, rgba(187,148,92,0.05) 0%, transparent 40%, transparent 60%, rgba(187,148,92,0.05) 100%);
+    pointer-events: none;
   }
-  @keyframes ps-spin { to { transform: rotate(360deg); } }
-  .ps-tryon-countdown-ring { position: relative; width: 100px; height: 100px; margin: 0 auto 20px; }
-  .ps-tryon-countdown-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
-  .ps-tryon-countdown-track { fill: none; stroke: #333; stroke-width: 4; }
-  .ps-tryon-countdown-progress { fill: none; stroke: var(--ps-loader, #bb945c); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 326.73; transition: stroke-dashoffset 1s linear; }
-  .ps-tryon-countdown-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
-  .ps-tryon-done-pulse { animation: ps-scale-in 0.4s ease both; }
+  .ps-tryon-scan-line {
+    position: absolute; left: 0; right: 0; height: 3px;
+    background: linear-gradient(90deg, transparent, #bb945c 20%, #d6ba7d 50%, #bb945c 80%, transparent);
+    box-shadow: 0 0 15px rgba(187,148,92,0.6), 0 0 40px rgba(187,148,92,0.2);
+    animation: ps-scan 2.5s ease-in-out infinite;
+    pointer-events: none; z-index: 2;
+  }
+  @keyframes ps-scan {
+    0% { top: 0; opacity: 0; }
+    5% { opacity: 1; }
+    95% { opacity: 1; }
+    100% { top: calc(100% - 3px); opacity: 0; }
+  }
+
+  .ps-tryon-progress-section {
+    display: flex; align-items: center; gap: 12px; width: 100%; max-width: 300px; margin-bottom: 16px;
+  }
+  .ps-tryon-progress-bar-wrap {
+    flex: 1; height: 6px; background: #333; border-radius: 3px; overflow: hidden;
+  }
+  .ps-tryon-progress-bar-fill {
+    height: 100%; background: linear-gradient(90deg, #bb945c, #d6ba7d);
+    border-radius: 3px; transition: width 0.3s ease;
+  }
+  .ps-tryon-progress-pct {
+    font-size: 13px; font-weight: 700; color: #bb945c; min-width: 36px; text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
   @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
   .ps-tryon-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
   .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }

package/package.json

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