@primestyleai/tryon 1.2.0 → 1.2.2

package/README.md

@@ -1,5 +1,7 @@
 <p align="center">
-  <img src="https://primestyleai.com/logo-gold.svg" alt="PrimeStyle AI" width="200" />
+  <a href="https://myaifitting.com">
+    <img src="https://cdn.jsdelivr.net/npm/@primestyleai/tryon/logo.svg" alt="PrimeStyle AI" width="180" />
+  </a>
 </p>
 
 <h1 align="center">@primestyleai/tryon</h1>
@@ -20,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>
 
 ---
@@ -49,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
@@ -322,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.
 
@@ -338,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.
 
@@ -355,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
@@ -419,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,
@@ -143,6 +143,24 @@ function PrimeStyleTryon({
       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 +205,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 +249,7 @@ function PrimeStyleTryon({
       onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
       return;
     }
+    completedRef.current = false;
     setView("processing");
     try {
       const modelImage = await compressImage(selectedFile);
@@ -226,33 +260,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 +296,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 +316,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,
@@ -510,7 +548,7 @@ function PrimeStyleTryon({
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "https://primestyleai.com",
+                        href: "https://myaifitting.com",
                         target: "_blank",
                         rel: "noopener noreferrer",
                         children: "PrimeStyle AI"

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/logo.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 841.9 510.4" style="enable-background:new 0 0 841.9 510.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D6BA7D;}
+</style>
+<g>
+	<path class="st0" d="M333.7,230.1c-9.1-0.1-12.4,3.9-10.7,12.8c1.2,6.3,2.8,12.7,5.3,18.7c16.1,39.2,43.1,69.4,77.8,93.1
+		c5.8,3.9,11,3.7,16.8,0.2c20.3-12.2,37.5-28.1,52-46.6c15-19.1,27.6-39.7,32.5-64c2.2-11-2.4-15.7-13.8-14.5
+		c-2.9,0.3-5.7,1.4-8.5,1.9c-1.9,0.4-3.8,0.4-6.9,0.7c10.4-11.8,29.4-13.9,39.3-4.7c11,10.2,21,21.3,31.8,31.7
+		c5.2,4.9,8,10.6,6.9,17.4c-2.2,14.3-3.6,28.9-8,42.5c-14.1,43.9-41.2,79.8-72.3,113.1c-6.5,6.9-7.2,6.9-13-1.1
+		c-13.3-18.4-26.3-37-39.7-55.3c-8.3-11.3-8.5-11.2-16.7,0.3c-13.3,18.6-26.6,37.3-39.9,56c-2.8,3.8-5.4,6.9-10.2,1.8
+		c-27.8-29.9-52.8-61.7-68.4-99.8c-7.6-18.6-14-37.7-13.7-58.1c0.1-4.7,1.5-10.6,4.5-13.9c11.1-12.1,22.8-23.6,34.8-34.8
+		c9.9-9.2,29.1-6.9,39.2,4.9C345.6,231.4,339.7,230,333.7,230.1z M375.1,401.5c7.5-10.7,14.9-21.4,22.7-31.8c3-4.1,2.6-6.2-1.7-9.1
+		c-27.9-18.8-50.4-42.9-66.7-72.2c-7.5-13.5-12.2-28.6-18.3-43.3c-0.2,0.2-1.7,1.2-2.9,2.4c-4.1,4.1-7.5,9.1-12.2,12.3
+		c-12.4,8.4-12.5,19.7-9.7,32.6c7.5,34.4,22.9,64.9,43.9,92.8c9.4,12.4,19.5,24.4,30,37.4C365.7,414.8,370.4,408.1,375.1,401.5z
+		 M429.1,364.4c13.7,19.3,27.2,38.3,41.2,57.9c20.5-23.3,39.3-47,53.7-74c10-18.7,16.8-38.4,20.3-59.3c1.9-11.5,1-21.2-9.4-28.8
+		c-5.7-4.3-10.2-10.2-16.3-16.4C506.1,297.7,473,334.6,429.1,364.4z"/>
+	<path class="st0" d="M481.8,268.1c-45.8-25.2-85.4-57.9-117.4-99.3c-6.8-8.8-11.9-19.4-15.4-30c-9.1-28.2,0.9-56.7,24.9-75.2
+		c21.6-16.5,54-18.1,77.7-3c16.9,10.8,27.8,26.1,30.3,46.3c0.4,3.4-1.6,8.3-4.2,10.6c-2,1.8-7.6,2.4-9.8,0.9
+		c-3.1-2.2-5.5-6.5-6.5-10.4c-6.6-25.5-26.7-39.5-53-36.5c-23.2,2.6-41.3,23.8-41.5,48.2c-0.1,13,4.2,24.7,12.4,34
+		c16.2,18.4,32.4,37.2,50.9,53.1c20,17.2,42.7,31.1,65.1,47.1c-1.8,4.5-4.3,10.7-6.9,17.2C485.7,270,483.7,269.3,481.8,268.1z"/>
+	<path class="st0" d="M134.3,426.9c64-0.3,127.9-0.2,191.9-0.1c2.3,0,5.5-0.2,6.8,1.1c6.5,6.5,12.4,13.5,19.1,20.9
+		c-2.4,0.2-4.1,0.4-5.7,0.4c-73.1,0-146.3-0.1-219.4-0.2c-3.4,0-6.8-0.2-10.1-0.7c-18.1-2.9-25-17.4-16-35.3
+		C108.4,426.9,121,426.9,134.3,426.9z"/>
+	<path class="st0" d="M705.1,448.9c-0.8,0-1.5,0-2.2,0c-73.6,0.1-147.3,0.2-220.9,0.3c-1.3,0-2.6-0.3-4.1-0.5
+		c5.6-5.9,11.1-11.2,16-17.1c2.9-3.5,5.8-5,10.4-5c64.7,0.2,129.4,0,194.1,0.4c12.9,0.1,24.5-1.1,32.3-14.9
+		C737.7,437.7,729.3,448.9,705.1,448.9z"/>
+	<path class="st0" d="M264.5,297.8c1.3,5-0.8,6.7-4.9,8.4c-22.4,9.4-45.2,18.2-67,28.9c-25.3,12.3-50.2,25.6-74.4,40
+		c-15.8,9.4-26.4,24-30.2,42.5c-1.1,5-0.9,10.3-1.4,17.3c-2.4-3.3-4.2-5.1-5.3-7.3c-8.5-17.5-8.9-35.3,3.8-50.3
+		c9.4-11,20.8-21.3,33.4-28.2c31.3-17.1,63.6-32.3,95.8-47.6c15.5-7.3,31.6-13.2,48.5-20.2C263.4,287.7,263.2,292.9,264.5,297.8z"/>
+	<path class="st0" d="M742.9,419.1c-3.1-18.8-13.7-33.1-29-43.3c-15.6-10.4-31.8-20.3-48.7-28.3c-31-14.7-62.6-27.8-93.9-41.8
+		c-2.2-1.1-5.5-3.5-5.5-5.2c0.2-6.2,1.6-12.3,2.6-18.8c2.2,0.7,4.1,1.1,5.8,1.9c34,15.1,68.3,29.5,101.8,45.5
+		c17.7,8.5,34.6,19.1,51.2,29.8c11.6,7.6,21.2,17.8,25.4,31.6c4.8,15.9,2.4,30.6-8.8,45C743.4,429,743.6,424,742.9,419.1z"/>
+	<path class="st0" d="M379.1,227.4c17-9.9,16.9-10.1,30.2,4.5c0.3,0.4,0.5,0.9,1.4,2.5c-22.4,12.4-44.9,24.7-68.2,37.6
+		c-3-7.7-5.3-13.7-7.8-20C350.1,243.5,364.7,235.7,379.1,227.4z"/>
+	<path class="st0" d="M556.3,327.9c2-5,3.5-9,5.3-13.4c48.9,20.7,98.9,36.9,143.1,66.1C657,358.4,606.5,344.1,556.3,327.9z"/>
+	<path class="st0" d="M268.3,315.2c1.1,2.9,2,4.9,2.6,6.9c0.6,2.1,1,4.1,1.2,5.1c-48.9,17.4-97.3,34.7-143.9,51.3
+		C170.4,351.4,219.9,335,268.3,315.2z"/>
+	<path class="st0" d="M465,299.1c-33.6,10.9-67,9.6-100.5,0c-7.8-2.2-9.4-3.6-12.6-12.2c42.3,15.7,84.4,16.7,127.2-0.3
+		C476.5,294.7,471.1,297.1,465,299.1z"/>
+	<path class="st0" d="M381.9,140.1c9.7,6.8,19.9,14.1,30.2,21.2c11.4,8,17.3,19,18.8,33.9C415.3,183.5,382.7,146,381.9,140.1z"/>
+	<path class="st0" d="M360.8,276c36.5,10.4,71.8,9.6,107.1,1.3C442.6,294.2,376.8,293.8,360.8,276z"/>
+</g>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",
@@ -18,6 +18,7 @@
   },
   "files": [
     "dist",
+    "logo.svg",
     "README.md"
   ],
   "scripts": {