@primestyleai/tryon 1.0.0 → 1.1.0

package/README.md

@@ -0,0 +1,332 @@
+<p align="center">
+  <img src="https://primestyleai.com/logo-gold.svg" alt="PrimeStyle AI" width="200" />
+</p>
+
+<h1 align="center">@primestyleai/tryon</h1>
+
+<p align="center">
+  <strong>AI-Powered Virtual Try-On for React & Next.js</strong>
+</p>
+
+<p align="center">
+  Add a virtual try-on button to your product pages in 3 steps. Customers upload a photo and see how clothes look on them — powered by PrimeStyle AI.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@primestyleai/tryon"><img src="https://img.shields.io/npm/v/@primestyleai/tryon?color=D6BA7D&label=npm" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@primestyleai/tryon"><img src="https://img.shields.io/npm/dm/@primestyleai/tryon?color=D6BA7D" alt="npm downloads" /></a>
+  <a href="https://github.com/primestyleai/tryon-sdk/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@primestyleai/tryon?color=D6BA7D" alt="license" /></a>
+  <img src="https://img.shields.io/badge/gzip-5.5kB-green" alt="bundle size" />
+</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>
+</p>
+
+---
+
+## How It Works
+
+1. Customer clicks the **"Virtual Try-On"** button on your product page
+2. They upload a photo of themselves
+3. PrimeStyle AI generates a realistic try-on image in ~15 seconds
+4. Customer sees how the garment looks on them before buying
+
+The entire flow happens inside a beautiful modal — no redirects, no iframes.
+
+---
+
+## Quick Start
+
+### 1. Install
+
+```bash
+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`:
+
+```env
+NEXT_PUBLIC_PRIMESTYLE_API_KEY=ps_live_your_key_here
+```
+
+### 3. Use the Component
+
+```jsx
+import { PrimeStyleTryon } from '@primestyleai/tryon/react';
+
+function ProductPage({ product }) {
+  return (
+    <div>
+      <h1>{product.name}</h1>
+      <img src={product.image} alt={product.name} />
+
+      <PrimeStyleTryon
+        productImage={product.image}
+        buttonText="Try It On"
+      />
+    </div>
+  );
+}
+```
+
+That's it. No API key prop needed — the component reads it from your environment automatically.
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `productImage` | `string` | **required** | URL of the garment image |
+| `buttonText` | `string` | `"Virtual Try-On"` | Text on the trigger button |
+| `apiUrl` | `string` | `NEXT_PUBLIC_PRIMESTYLE_API_URL` or production | API endpoint override |
+| `showPoweredBy` | `boolean` | `true` | Show "Powered by PrimeStyle AI" in modal |
+| `buttonStyles` | `ButtonStyles` | `{}` | Customize button appearance |
+| `modalStyles` | `ModalStyles` | `{}` | Customize modal appearance |
+| `className` | `string` | — | Additional CSS class on wrapper |
+| `style` | `CSSProperties` | — | Inline styles on wrapper |
+| `onOpen` | `() => void` | — | Modal opened |
+| `onClose` | `() => void` | — | Modal closed |
+| `onUpload` | `(file: File) => void` | — | User uploaded a photo |
+| `onProcessing` | `(jobId: string) => void` | — | Try-on generation started |
+| `onComplete` | `(result) => void` | — | Result ready: `{ jobId, imageUrl }` |
+| `onError` | `(error) => void` | — | Error occurred: `{ message, code? }` |
+
+---
+
+## Customization
+
+### Button Styles
+
+```jsx
+<PrimeStyleTryon
+  productImage={product.image}
+  buttonStyles={{
+    backgroundColor: '#000000',
+    textColor: '#ffffff',
+    borderRadius: '50px',
+    padding: '16px 32px',
+    fontSize: '16px',
+    fontWeight: '700',
+    width: '100%',
+    border: '2px solid #333',
+    hoverBackgroundColor: '#222',
+    iconSize: '20px',
+    boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+  }}
+/>
+```
+
+**All ButtonStyles properties:**
+
+| Property | Description |
+|----------|-------------|
+| `backgroundColor` | Button background color |
+| `textColor` | Button text color |
+| `borderRadius` | Corner rounding |
+| `fontSize` | Text size |
+| `fontFamily` | Font stack |
+| `fontWeight` | Font weight |
+| `padding` | Inner spacing |
+| `border` | Border style |
+| `width` | Button width (e.g. `"100%"`) |
+| `height` | Button height |
+| `hoverBackgroundColor` | Background on hover |
+| `hoverTextColor` | Text color on hover |
+| `iconSize` | Camera icon size |
+| `iconColor` | Camera icon color |
+| `boxShadow` | Shadow effect |
+
+### Modal Styles
+
+```jsx
+<PrimeStyleTryon
+  productImage={product.image}
+  modalStyles={{
+    backgroundColor: '#ffffff',
+    textColor: '#111111',
+    overlayColor: 'rgba(0,0,0,0.7)',
+    borderRadius: '16px',
+    maxWidth: '520px',
+    headerBackgroundColor: '#f5f5f5',
+    headerTextColor: '#111111',
+    primaryButtonBackgroundColor: '#000000',
+    primaryButtonTextColor: '#ffffff',
+    loaderColor: '#000000',
+  }}
+/>
+```
+
+**All ModalStyles properties:**
+
+| Property | Description |
+|----------|-------------|
+| `overlayColor` | Background overlay color |
+| `backgroundColor` | Modal background |
+| `textColor` | Modal text color |
+| `borderRadius` | Modal corner rounding |
+| `width` / `maxWidth` | Modal dimensions |
+| `fontFamily` | Modal font stack |
+| `headerBackgroundColor` | Header section background |
+| `headerTextColor` | Header title color |
+| `closeButtonColor` | Close (X) button color |
+| `uploadBorderColor` | Upload drop zone border |
+| `uploadBackgroundColor` | Upload zone background |
+| `uploadTextColor` | Upload zone text |
+| `uploadIconColor` | Upload icon color |
+| `primaryButtonBackgroundColor` | Submit / download button background |
+| `primaryButtonTextColor` | Submit / download button text |
+| `primaryButtonBorderRadius` | Submit button rounding |
+| `loaderColor` | Loading spinner color |
+| `resultBorderRadius` | Result image corner rounding |
+
+---
+
+## Callbacks
+
+```jsx
+<PrimeStyleTryon
+  productImage={product.image}
+  onOpen={() => {
+    analytics.track('tryon_opened');
+  }}
+  onUpload={(file) => {
+    console.log('Photo uploaded:', file.name);
+  }}
+  onProcessing={(jobId) => {
+    console.log('Processing:', jobId);
+  }}
+  onComplete={(result) => {
+    console.log('Result ready:', result.imageUrl);
+    analytics.track('tryon_completed', { jobId: result.jobId });
+  }}
+  onError={(error) => {
+    console.error('Try-on failed:', error.message);
+    // error.code: 'INSUFFICIENT_TOKENS' | 'API_ERROR' | etc.
+  }}
+  onClose={() => {
+    console.log('Modal closed');
+  }}
+/>
+```
+
+---
+
+## Environment Variables
+
+| 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 |
+
+The component reads these automatically — no need to pass them as props.
+
+---
+
+## Tokens & Pricing
+
+Each virtual try-on consumes **tokens** from your account balance.
+
+| | |
+|---|---|
+| **Free trial** | Tokens included on signup |
+| **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).
+
+If a try-on fails, tokens are **automatically refunded** to your account.
+
+The `onComplete` callback includes token info:
+
+```jsx
+onComplete={(result) => {
+  // result.jobId — the job ID
+  // result.imageUrl — the result image URL
+}}
+```
+
+---
+
+## API Key Management
+
+Create and manage your API keys at the [Developer Dashboard](https://primestyleai.com/dashboard/developer/keys).
+
+- Keys start with `ps_live_` and are shown **once** at creation
+- Set **allowed domains** to restrict where your key can be used
+- **Revoke** keys instantly if compromised
+- Maximum 10 active keys per account
+
+---
+
+## Full Example
+
+```jsx
+// app/product/[id]/page.tsx (Next.js App Router)
+
+import { PrimeStyleTryon } from '@primestyleai/tryon/react';
+
+export default function ProductPage({ product }) {
+  return (
+    <div className="product-page">
+      <div className="product-gallery">
+        <img src={product.image} alt={product.name} />
+      </div>
+
+      <div className="product-info">
+        <h1>{product.name}</h1>
+        <p className="price">${product.price}</p>
+
+        {/* Virtual Try-On — reads API key from env */}
+        <PrimeStyleTryon
+          productImage={product.image}
+          buttonText="Try It On"
+          buttonStyles={{
+            width: '100%',
+            padding: '14px 24px',
+            borderRadius: '10px',
+            fontSize: '15px',
+          }}
+          onComplete={(result) => {
+            // Show success toast, track analytics, etc.
+            toast.success('Your try-on is ready!');
+          }}
+          onError={(error) => {
+            toast.error(error.message);
+          }}
+        />
+
+        <button className="add-to-cart">Add to Cart</button>
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+## Requirements
+
+- React 18+
+- Next.js 13+ (App Router or Pages Router)
+
+---
+
+## 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
+- [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>
+</p>

package/dist/image-utils-usff6Qu8.js

@@ -0,0 +1,186 @@
+const DEFAULT_API_URL = "https://api.primestyleai.com";
+class ApiClient {
+  constructor(apiKey, apiUrl) {
+    this.apiKey = apiKey;
+    this.baseUrl = (apiUrl || DEFAULT_API_URL).replace(/\/+$/, "");
+  }
+  get headers() {
+    return {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${this.apiKey}`
+    };
+  }
+  async submitTryOn(modelImage, garmentImage) {
+    const res = await fetch(`${this.baseUrl}/api/v1/tryon`, {
+      method: "POST",
+      headers: this.headers,
+      body: JSON.stringify({ modelImage, garmentImage })
+    });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      if (res.status === 402) {
+        throw new PrimeStyleError(
+          data.message || "Insufficient tokens",
+          "INSUFFICIENT_TOKENS"
+        );
+      }
+      throw new PrimeStyleError(
+        data.message || "Failed to submit try-on",
+        "API_ERROR"
+      );
+    }
+    return res.json();
+  }
+  async getStatus(jobId) {
+    const res = await fetch(`${this.baseUrl}/api/v1/tryon/status/${jobId}`, {
+      headers: this.headers
+    });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      throw new PrimeStyleError(
+        data.message || "Failed to get status",
+        "API_ERROR"
+      );
+    }
+    return res.json();
+  }
+  getStreamUrl() {
+    return `${this.baseUrl}/api/v1/tryon/stream?key=${encodeURIComponent(this.apiKey)}`;
+  }
+}
+class PrimeStyleError extends Error {
+  constructor(message, code) {
+    super(message);
+    this.name = "PrimeStyleError";
+    this.code = code;
+  }
+}
+class SseClient {
+  constructor(streamUrl) {
+    this.eventSource = null;
+    this.listeners = /* @__PURE__ */ new Map();
+    this.reconnectTimer = null;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 5;
+    this.streamUrl = streamUrl;
+  }
+  connect() {
+    if (this.eventSource) return;
+    this.eventSource = new EventSource(this.streamUrl);
+    this.eventSource.addEventListener("vto-update", (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        this.emit(data.galleryId, data);
+      } catch {
+      }
+    });
+    this.eventSource.onopen = () => {
+      this.reconnectAttempts = 0;
+    };
+    this.eventSource.onerror = () => {
+      this.eventSource?.close();
+      this.eventSource = null;
+      this.scheduleReconnect();
+    };
+  }
+  scheduleReconnect() {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) return;
+    if (this.listeners.size === 0) return;
+    const delay = Math.min(1e3 * 2 ** this.reconnectAttempts, 3e4);
+    this.reconnectAttempts++;
+    this.reconnectTimer = setTimeout(() => {
+      this.connect();
+    }, delay);
+  }
+  onJob(jobId, callback) {
+    if (!this.listeners.has(jobId)) {
+      this.listeners.set(jobId, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(jobId).add(callback);
+    if (!this.eventSource) {
+      this.connect();
+    }
+    return () => {
+      const jobListeners = this.listeners.get(jobId);
+      if (jobListeners) {
+        jobListeners.delete(callback);
+        if (jobListeners.size === 0) {
+          this.listeners.delete(jobId);
+        }
+      }
+      if (this.listeners.size === 0) {
+        this.disconnect();
+      }
+    };
+  }
+  emit(jobId, update) {
+    const callbacks = this.listeners.get(jobId);
+    if (callbacks) {
+      callbacks.forEach((cb) => cb(update));
+    }
+  }
+  disconnect() {
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+    this.listeners.clear();
+    this.reconnectAttempts = 0;
+  }
+}
+const MAX_DIMENSION = 1024;
+const JPEG_QUALITY = 0.85;
+function compressImage(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = () => {
+        try {
+          const canvas = document.createElement("canvas");
+          let { width, height } = img;
+          if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
+            if (width > height) {
+              height = Math.round(height * MAX_DIMENSION / width);
+              width = MAX_DIMENSION;
+            } else {
+              width = Math.round(width * MAX_DIMENSION / height);
+              height = MAX_DIMENSION;
+            }
+          }
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Canvas context not available"));
+            return;
+          }
+          ctx.drawImage(img, 0, 0, width, height);
+          const dataUrl = canvas.toDataURL("image/jpeg", JPEG_QUALITY);
+          resolve(dataUrl);
+        } catch (err) {
+          reject(err);
+        }
+      };
+      img.onerror = () => reject(new Error("Failed to load image"));
+      img.src = reader.result;
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
+function isValidImageFile(file) {
+  const accepted = ["image/jpeg", "image/png", "image/webp"];
+  return accepted.includes(file.type);
+}
+export {
+  ApiClient as A,
+  PrimeStyleError as P,
+  SseClient as S,
+  compressImage as c,
+  isValidImageFile as i
+};

package/dist/{primestyle-tryon.es.js → primestyle-tryon.js}

@@ -1,137 +1,5 @@
-const DEFAULT_API_URL = "https://api.primestyleai.com";
-class ApiClient {
-  constructor(apiKey, apiUrl) {
-    this.apiKey = apiKey;
-    this.baseUrl = (apiUrl || DEFAULT_API_URL).replace(/\/+$/, "");
-  }
-  get headers() {
-    return {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${this.apiKey}`
-    };
-  }
-  async submitTryOn(modelImage, garmentImage) {
-    const res = await fetch(`${this.baseUrl}/api/v1/tryon`, {
-      method: "POST",
-      headers: this.headers,
-      body: JSON.stringify({ modelImage, garmentImage })
-    });
-    if (!res.ok) {
-      const data = await res.json().catch(() => ({}));
-      if (res.status === 402) {
-        throw new PrimeStyleError(
-          data.message || "Insufficient tokens",
-          "INSUFFICIENT_TOKENS"
-        );
-      }
-      throw new PrimeStyleError(
-        data.message || "Failed to submit try-on",
-        "API_ERROR"
-      );
-    }
-    return res.json();
-  }
-  async getStatus(jobId) {
-    const res = await fetch(`${this.baseUrl}/api/v1/tryon/status/${jobId}`, {
-      headers: this.headers
-    });
-    if (!res.ok) {
-      const data = await res.json().catch(() => ({}));
-      throw new PrimeStyleError(
-        data.message || "Failed to get status",
-        "API_ERROR"
-      );
-    }
-    return res.json();
-  }
-  getStreamUrl() {
-    return `${this.baseUrl}/api/v1/tryon/stream?key=${encodeURIComponent(this.apiKey)}`;
-  }
-}
-class PrimeStyleError extends Error {
-  constructor(message, code) {
-    super(message);
-    this.name = "PrimeStyleError";
-    this.code = code;
-  }
-}
-class SseClient {
-  constructor(streamUrl) {
-    this.eventSource = null;
-    this.listeners = /* @__PURE__ */ new Map();
-    this.reconnectTimer = null;
-    this.reconnectAttempts = 0;
-    this.maxReconnectAttempts = 5;
-    this.streamUrl = streamUrl;
-  }
-  connect() {
-    if (this.eventSource) return;
-    this.eventSource = new EventSource(this.streamUrl);
-    this.eventSource.addEventListener("vto-update", (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        this.emit(data.galleryId, data);
-      } catch {
-      }
-    });
-    this.eventSource.onopen = () => {
-      this.reconnectAttempts = 0;
-    };
-    this.eventSource.onerror = () => {
-      this.eventSource?.close();
-      this.eventSource = null;
-      this.scheduleReconnect();
-    };
-  }
-  scheduleReconnect() {
-    if (this.reconnectAttempts >= this.maxReconnectAttempts) return;
-    if (this.listeners.size === 0) return;
-    const delay = Math.min(1e3 * 2 ** this.reconnectAttempts, 3e4);
-    this.reconnectAttempts++;
-    this.reconnectTimer = setTimeout(() => {
-      this.connect();
-    }, delay);
-  }
-  onJob(jobId, callback) {
-    if (!this.listeners.has(jobId)) {
-      this.listeners.set(jobId, /* @__PURE__ */ new Set());
-    }
-    this.listeners.get(jobId).add(callback);
-    if (!this.eventSource) {
-      this.connect();
-    }
-    return () => {
-      const jobListeners = this.listeners.get(jobId);
-      if (jobListeners) {
-        jobListeners.delete(callback);
-        if (jobListeners.size === 0) {
-          this.listeners.delete(jobId);
-        }
-      }
-      if (this.listeners.size === 0) {
-        this.disconnect();
-      }
-    };
-  }
-  emit(jobId, update) {
-    const callbacks = this.listeners.get(jobId);
-    if (callbacks) {
-      callbacks.forEach((cb) => cb(update));
-    }
-  }
-  disconnect() {
-    if (this.reconnectTimer) {
-      clearTimeout(this.reconnectTimer);
-      this.reconnectTimer = null;
-    }
-    if (this.eventSource) {
-      this.eventSource.close();
-      this.eventSource = null;
-    }
-    this.listeners.clear();
-    this.reconnectAttempts = 0;
-  }
-}
+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";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'
@@ -193,51 +61,6 @@ function extractSchemaImage(data) {
   }
   return null;
 }
-const MAX_DIMENSION = 1024;
-const JPEG_QUALITY = 0.85;
-function compressImage(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      const img = new Image();
-      img.onload = () => {
-        try {
-          const canvas = document.createElement("canvas");
-          let { width, height } = img;
-          if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
-            if (width > height) {
-              height = Math.round(height * MAX_DIMENSION / width);
-              width = MAX_DIMENSION;
-            } else {
-              width = Math.round(width * MAX_DIMENSION / height);
-              height = MAX_DIMENSION;
-            }
-          }
-          canvas.width = width;
-          canvas.height = height;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) {
-            reject(new Error("Canvas context not available"));
-            return;
-          }
-          ctx.drawImage(img, 0, 0, width, height);
-          const dataUrl = canvas.toDataURL("image/jpeg", JPEG_QUALITY);
-          resolve(dataUrl);
-        } catch (err) {
-          reject(err);
-        }
-      };
-      img.onerror = () => reject(new Error("Failed to load image"));
-      img.src = reader.result;
-    };
-    reader.onerror = () => reject(new Error("Failed to read file"));
-    reader.readAsDataURL(file);
-  });
-}
-function isValidImageFile(file) {
-  const accepted = ["image/jpeg", "image/png", "image/webp"];
-  return accepted.includes(file.type);
-}
 function getStyles() {
   return `
     :host {
@@ -1160,7 +983,7 @@ if (typeof window !== "undefined" && !customElements.get("primestyle-tryon")) {
 }
 export {
   ApiClient,
-  PrimeStyleError,
+  P as PrimeStyleError,
   PrimeStyleTryon,
   SseClient,
   compressImage,