@primestyleai/tryon 1.2.1 → 1.3.0

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://primestyleai.com">
+  <a href="https://myaifitting.com">
     <img src="https://cdn.jsdelivr.net/npm/@primestyleai/tryon/logo.svg" alt="PrimeStyle AI" width="180" />
   </a>
 </p>
@@ -22,10 +22,10 @@
 </p>
 
 <p align="center">
-  <a href="https://primestyleai.com/developer/demo">Live Demo</a> &bull;
-  <a href="https://primestyleai.com/docs">Documentation</a> &bull;
-  <a href="https://primestyleai.com/dashboard/developer/keys">Get API Key</a> &bull;
-  <a href="https://primestyleai.com/pricing">Pricing</a>
+  <a href="https://myaifitting.com/developer/demo">Live Demo</a> &bull;
+  <a href="https://myaifitting.com/docs">Documentation</a> &bull;
+  <a href="https://myaifitting.com/developer/dashboard/keys">Get API Key</a> &bull;
+  <a href="https://myaifitting.com/pricing">Pricing</a>
 </p>
 
 ---
@@ -51,7 +51,7 @@ npm install @primestyleai/tryon
 
 ### 2. Set Your API Key
 
-Get your key from the [Developer Dashboard](https://primestyleai.com/dashboard/developer/keys) and add it to your `.env.local`:
+Get your key from the [Developer Dashboard](https://myaifitting.com/developer/dashboard/keys) and add it to your `.env.local`:
 
 ```env
 NEXT_PUBLIC_PRIMESTYLE_API_KEY=ps_live_your_key_here
@@ -324,7 +324,7 @@ Priority: Tailwind/classNames classes > CSS variables (buttonStyles/modalStyles)
 | Variable | Required | Default | Description |
 |----------|----------|---------|-------------|
 | `NEXT_PUBLIC_PRIMESTYLE_API_KEY` | Yes | — | Your PrimeStyle API key |
-| `NEXT_PUBLIC_PRIMESTYLE_API_URL` | No | `https://api.primestyleai.com` | Custom API endpoint |
+| `NEXT_PUBLIC_PRIMESTYLE_API_URL` | No | `https://myaifitting.com` | Custom API endpoint |
 
 The component reads these automatically — no need to pass them as props.
 
@@ -340,7 +340,7 @@ Each virtual try-on consumes **tokens** from your account balance.
 | **Token packs** | Pay-as-you-go, never expire |
 | **Monthly plans** | Volume discounts for high-traffic stores |
 
-Manage your balance and purchase tokens at [primestyleai.com/dashboard/billing](https://primestyleai.com/dashboard/billing).
+Manage your balance and purchase tokens at [primestyleai.com/developer/dashboard/billing](https://myaifitting.com/developer/dashboard/billing).
 
 If a try-on fails, tokens are **automatically refunded** to your account.
 
@@ -357,7 +357,7 @@ onComplete={(result) => {
 
 ## API Key Management
 
-Create and manage your API keys at the [Developer Dashboard](https://primestyleai.com/dashboard/developer/keys).
+Create and manage your API keys at the [Developer Dashboard](https://myaifitting.com/developer/dashboard/keys).
 
 - Keys start with `ps_live_` and are shown **once** at creation
 - Set **allowed domains** to restrict where your key can be used
@@ -421,13 +421,13 @@ export default function ProductPage({ product }) {
 
 ## Need Help?
 
-- [Live Demo](https://primestyleai.com/developer/demo) — See it in action
-- [Documentation](https://primestyleai.com/docs) — Full API reference
-- [Dashboard](https://primestyleai.com/dashboard/developer/keys) — Manage keys & tokens
+- [Live Demo](https://myaifitting.com/developer/demo) — See it in action
+- [Documentation](https://myaifitting.com/docs) — Full API reference
+- [Dashboard](https://myaifitting.com/developer/dashboard/keys) — Manage keys & tokens
 - [Contact](mailto:support@primestyleai.com) — We're here to help
 
 ---
 
 <p align="center">
-  Built with care by <a href="https://primestyleai.com">PrimeStyle AI</a>
+  Built with care by <a href="https://myaifitting.com">PrimeStyle AI</a>
 </p>

package/dist/PrimeStyleTryon.d.ts

@@ -22,6 +22,9 @@ export declare class PrimeStyleTryon extends HTMLElement {
     setButtonStyles(styles: ButtonStyles): void;
     /** Configure modal appearance programmatically */
     setModalStyles(styles: ModalStyles): void;
+    private savedScrollY;
+    private lockBodyScroll;
+    private unlockBodyScroll;
     /** Open the try-on modal */
     open(): void;
     /** Close the try-on modal */

package/dist/{image-utils-usff6Qu8.js → image-utils-DtJVYQIA.js}

@@ -1,4 +1,4 @@
-const DEFAULT_API_URL = "https://api.primestyleai.com";
+const DEFAULT_API_URL = "https://myaifitting.com";
 class ApiClient {
   constructor(apiKey, apiUrl) {
     this.apiKey = apiKey;

package/dist/primestyle-tryon.js

@@ -1,5 +1,5 @@
-import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage } from "./image-utils-usff6Qu8.js";
-import { P } from "./image-utils-usff6Qu8.js";
+import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage } from "./image-utils-DtJVYQIA.js";
+import { P } from "./image-utils-DtJVYQIA.js";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'
@@ -459,6 +459,7 @@ class PrimeStyleTryon extends HTMLElement {
     this.productImageUrl = null;
     this.buttonStyles = {};
     this.modalStyles = {};
+    this.savedScrollY = 0;
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
@@ -512,15 +513,33 @@ class PrimeStyleTryon extends HTMLElement {
     this.modalStyles = { ...this.modalStyles, ...styles };
     this.applyModalStyles();
   }
+  lockBodyScroll() {
+    this.savedScrollY = window.scrollY;
+    document.body.style.overflow = "hidden";
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${this.savedScrollY}px`;
+    document.body.style.left = "0";
+    document.body.style.right = "0";
+  }
+  unlockBodyScroll() {
+    document.body.style.overflow = "";
+    document.body.style.position = "";
+    document.body.style.top = "";
+    document.body.style.left = "";
+    document.body.style.right = "";
+    window.scrollTo(0, this.savedScrollY);
+  }
   /** Open the try-on modal */
   open() {
     this.state = "upload";
+    this.lockBodyScroll();
     this.render();
     this.emit("ps:open");
   }
   /** Close the try-on modal */
   close() {
     this.state = "idle";
+    this.unlockBodyScroll();
     this.resetUpload();
     this.render();
     this.emit("ps:close");
@@ -567,6 +586,9 @@ class PrimeStyleTryon extends HTMLElement {
     this.sseClient = new SseClient(this.apiClient.getStreamUrl());
   }
   cleanup() {
+    if (this.state !== "idle") {
+      this.unlockBodyScroll();
+    }
     if (this.sseUnsubscribe) {
       this.sseUnsubscribe();
       this.sseUnsubscribe = null;
@@ -653,7 +675,7 @@ class PrimeStyleTryon extends HTMLElement {
     if (this.showPoweredBy) {
       const powered = document.createElement("div");
       powered.className = "ps-powered";
-      powered.innerHTML = `Powered by <a href="https://primestyleai.com" target="_blank" rel="noopener">PrimeStyle AI</a>`;
+      powered.innerHTML = `Powered by <a href="https://myaifitting.com" target="_blank" rel="noopener">PrimeStyle AI</a>`;
       modal.appendChild(powered);
     }
     overlay.appendChild(modal);

package/dist/react/index.d.ts

@@ -5,7 +5,7 @@ export interface PrimeStyleTryonProps {
     productImage: string;
     /** Button text (defaults to "Virtual Try-On") */
     buttonText?: string;
-    /** API base URL — defaults to NEXT_PUBLIC_PRIMESTYLE_API_URL env or https://api.primestyleai.com */
+    /** API base URL — defaults to NEXT_PUBLIC_PRIMESTYLE_API_URL env or https://myaifitting.com */
     apiUrl?: string;
     /** Show "Powered by PrimeStyle" in modal footer (defaults to true) */
     showPoweredBy?: boolean;

package/dist/react/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback } from "react";
-import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage, P as PrimeStyleError } from "../image-utils-usff6Qu8.js";
+import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage, P as PrimeStyleError } from "../image-utils-DtJVYQIA.js";
 function cx(base, override) {
   return override ? `${base} ${override}` : base;
 }
@@ -94,7 +94,7 @@ function getApiKey() {
   return key;
 }
 function getApiUrl(override) {
-  return override || process.env.NEXT_PUBLIC_PRIMESTYLE_API_URL || "https://api.primestyleai.com";
+  return override || process.env.NEXT_PUBLIC_PRIMESTYLE_API_URL || "https://myaifitting.com";
 }
 function PrimeStyleTryon({
   productImage,
@@ -119,6 +119,7 @@ function PrimeStyleTryon({
   const [resultImageUrl, setResultImageUrl] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const [dragOver, setDragOver] = useState(false);
+  const [countdown, setCountdown] = useState(20);
   const fileInputRef = useRef(null);
   const apiRef = useRef(null);
   const sseRef = useRef(null);
@@ -138,11 +139,44 @@ function PrimeStyleTryon({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  useEffect(() => {
+    if (view === "processing") {
+      setCountdown(20);
+      const interval = setInterval(() => {
+        setCountdown((prev) => {
+          if (prev <= 1) {
+            clearInterval(interval);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(interval);
+    }
+  }, [view]);
   useEffect(() => {
     return () => {
       if (previewUrl) URL.revokeObjectURL(previewUrl);
     };
   }, [previewUrl]);
+  useEffect(() => {
+    if (view !== "idle") {
+      const scrollY = window.scrollY;
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.left = "0";
+      document.body.style.right = "0";
+      return () => {
+        document.body.style.overflow = "";
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.left = "";
+        document.body.style.right = "";
+        window.scrollTo(0, scrollY);
+      };
+    }
+  }, [view]);
   const handleOpen = useCallback(() => {
     setView("upload");
     onOpen?.();
@@ -187,26 +221,41 @@ function PrimeStyleTryon({
     if (previewUrl) URL.revokeObjectURL(previewUrl);
     setPreviewUrl(null);
   }, [previewUrl]);
+  const completedRef = useRef(false);
+  const cleanupJob = useCallback(() => {
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current);
+      pollingRef.current = null;
+    }
+    unsubRef.current?.();
+    unsubRef.current = null;
+  }, []);
   const handleVtoUpdate = useCallback(
-    (update, currentView) => {
+    (update) => {
       if (update.status === "completed" && update.imageUrl) {
         setResultImageUrl((prev) => {
-          if (prev?.startsWith("data:") || !prev) return update.imageUrl;
+          if (!prev || prev.startsWith("data:")) return update.imageUrl;
           if (!update.imageUrl.startsWith("data:")) return update.imageUrl;
           return prev;
         });
-        if (currentView !== "result") {
+        if (!completedRef.current) {
+          completedRef.current = true;
+          cleanupJob();
           setView("result");
           onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
         }
       } else if (update.status === "failed") {
-        const msg = update.error || "Try-on generation failed";
-        setErrorMessage(msg);
-        setView("error");
-        onError?.({ message: msg });
+        if (!completedRef.current) {
+          completedRef.current = true;
+          cleanupJob();
+          const msg = update.error || "Try-on generation failed";
+          setErrorMessage(msg);
+          setView("error");
+          onError?.({ message: msg });
+        }
       }
     },
-    [onComplete, onError]
+    [onComplete, onError, cleanupJob]
   );
   const handleSubmit = useCallback(async () => {
     if (!selectedFile || !apiRef.current || !sseRef.current) {
@@ -216,6 +265,7 @@ function PrimeStyleTryon({
       onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
       return;
     }
+    completedRef.current = false;
     setView("processing");
     try {
       const modelImage = await compressImage(selectedFile);
@@ -226,33 +276,35 @@ function PrimeStyleTryon({
       onProcessing?.(response.jobId);
       unsubRef.current = sseRef.current.onJob(
         response.jobId,
-        (update) => handleVtoUpdate(update, view)
+        (update) => handleVtoUpdate(update)
       );
       let attempts = 0;
       pollingRef.current = setInterval(async () => {
+        if (completedRef.current) {
+          if (pollingRef.current) clearInterval(pollingRef.current);
+          pollingRef.current = null;
+          return;
+        }
         attempts++;
         if (attempts > 60) {
           if (pollingRef.current) clearInterval(pollingRef.current);
+          pollingRef.current = null;
           return;
         }
         try {
           const status = await apiRef.current.getStatus(response.jobId);
           if (status.status === "completed" || status.status === "failed") {
-            handleVtoUpdate(
-              {
-                galleryId: response.jobId,
-                status: status.status,
-                imageUrl: status.imageUrl,
-                error: status.status === "failed" ? status.message : null,
-                timestamp: Date.now()
-              },
-              view
-            );
-            if (pollingRef.current) clearInterval(pollingRef.current);
+            handleVtoUpdate({
+              galleryId: response.jobId,
+              status: status.status,
+              imageUrl: status.imageUrl,
+              error: status.status === "failed" ? status.message : null,
+              timestamp: Date.now()
+            });
           }
         } catch {
         }
-      }, 2e3);
+      }, 3e3);
     } catch (err) {
       const message = err instanceof Error ? err.message : "Failed to start try-on";
       const code = err instanceof PrimeStyleError ? err.code : void 0;
@@ -260,7 +312,7 @@ function PrimeStyleTryon({
       setView("error");
       onError?.({ message, code });
     }
-  }, [selectedFile, productImage, onProcessing, onError, handleVtoUpdate, view]);
+  }, [selectedFile, productImage, onProcessing, onError, handleVtoUpdate]);
   const handleDownload = useCallback(() => {
     if (!resultImageUrl) return;
     if (resultImageUrl.startsWith("data:")) {
@@ -280,13 +332,15 @@ function PrimeStyleTryon({
     }
   }, [resultImageUrl]);
   const handleRetry = useCallback(() => {
+    completedRef.current = false;
+    cleanupJob();
     setSelectedFile(null);
     if (previewUrl) URL.revokeObjectURL(previewUrl);
     setPreviewUrl(null);
     setResultImageUrl(null);
     setErrorMessage(null);
     setView("upload");
-  }, [previewUrl]);
+  }, [previewUrl, cleanupJob]);
   const rootVars = {
     "--ps-btn-bg": btnS.backgroundColor,
     "--ps-btn-color": btnS.textColor,
@@ -426,13 +480,38 @@ function PrimeStyleTryon({
                             }
                           ),
                           /* @__PURE__ */ jsx(UploadIcon, {}),
-                          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop your photo here or click to upload" }),
+                          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
                           /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
                         ]
                       }
                     ) }),
                     view === "processing" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-                      /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-spinner", cn.spinner) }),
+                      /* @__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",
+                            {
+                              className: "ps-tryon-countdown-progress",
+                              cx: "60",
+                              cy: "60",
+                              r: "52",
+                              style: {
+                                strokeDashoffset: `${countdown / 20 * 326.73}`
+                              }
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsx("span", { className: "ps-tryon-countdown-number", children: countdown })
+                      ] }),
                       /* @__PURE__ */ jsx(
                         "p",
                         {
@@ -450,7 +529,7 @@ function PrimeStyleTryon({
                             "ps-tryon-processing-sub",
                             cn.processingSubText
                           ),
-                          children: "This usually takes 15-20 seconds"
+                          children: countdown > 0 ? "This usually takes 15-20 seconds" : "Almost there..."
                         }
                       )
                     ] }),
@@ -510,7 +589,7 @@ function PrimeStyleTryon({
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "https://primestyleai.com",
+                        href: "https://myaifitting.com",
                         target: "_blank",
                         rel: "noopener noreferrer",
                         children: "PrimeStyle AI"
@@ -712,6 +791,43 @@ function PrimeStyleTryon({
           margin: 0 auto 16px;
         }
         @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-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
         .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }
 

package/dist/types.d.ts

@@ -2,7 +2,7 @@
 export interface PrimeStyleConfig {
     /** Your API key (starts with ps_live_) */
     apiKey: string;
-    /** API base URL (defaults to https://api.primestyleai.com) */
+    /** API base URL (defaults to https://myaifitting.com) */
     apiUrl?: string;
     /** Product image URL to try on */
     productImage?: string;

package/package.json

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