@primestyleai/tryon 1.0.0

package/dist/primestyle-tryon.es.js

@@ -0,0 +1,1169 @@
+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;
+  }
+}
+function detectProductImage() {
+  const ogImage = document.querySelector(
+    'meta[property="og:image"]'
+  );
+  if (ogImage?.content) return ogImage.content;
+  const jsonLdScripts = document.querySelectorAll(
+    'script[type="application/ld+json"]'
+  );
+  for (const script of jsonLdScripts) {
+    try {
+      const data = JSON.parse(script.textContent || "");
+      const image = extractSchemaImage(data);
+      if (image) return image;
+    } catch {
+    }
+  }
+  const selectors = [
+    "[data-product-image] img",
+    "[data-product-image]",
+    ".product-image img",
+    ".product-gallery img",
+    "#product-image",
+    ".product__media img",
+    ".product-single__photo img",
+    ".woocommerce-product-gallery img",
+    ".product-media img"
+  ];
+  for (const selector of selectors) {
+    const el = document.querySelector(selector);
+    if (el) {
+      const src = el.src || el.dataset.src || el.dataset.zoom;
+      if (src) return src;
+    }
+  }
+  return null;
+}
+function extractSchemaImage(data) {
+  if (!data || typeof data !== "object") return null;
+  if (Array.isArray(data)) {
+    for (const item of data) {
+      const result = extractSchemaImage(item);
+      if (result) return result;
+    }
+    return null;
+  }
+  const obj = data;
+  if (obj["@type"] === "Product" || obj["@type"] === "IndividualProduct") {
+    const image = obj.image;
+    if (typeof image === "string") return image;
+    if (Array.isArray(image) && typeof image[0] === "string") return image[0];
+    if (image && typeof image === "object") {
+      const imgObj = image;
+      if (typeof imgObj.url === "string") return imgObj.url;
+      if (typeof imgObj.contentUrl === "string") return imgObj.contentUrl;
+    }
+  }
+  if (Array.isArray(obj["@graph"])) {
+    return extractSchemaImage(obj["@graph"]);
+  }
+  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 {
+      display: inline-block;
+      --ps-primary: #bb945c;
+      --ps-primary-hover: #a07d4e;
+      --ps-text: #ffffff;
+      --ps-text-secondary: #999999;
+      --ps-bg: #111211;
+      --ps-bg-secondary: #1a1b1a;
+      --ps-border: #333333;
+      --ps-radius: 12px;
+      --ps-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --ps-overlay: rgba(0, 0, 0, 0.6);
+      --ps-error: #ef4444;
+      --ps-success: #22c55e;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* ── Button ─────────────────────────────── */
+    .ps-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: var(--ps-btn-padding, 12px 24px);
+      background: var(--ps-btn-bg, var(--ps-primary));
+      color: var(--ps-btn-color, #111211);
+      font-family: var(--ps-btn-font, var(--ps-font));
+      font-size: var(--ps-btn-font-size, 14px);
+      font-weight: var(--ps-btn-font-weight, 600);
+      border: var(--ps-btn-border, none);
+      border-radius: var(--ps-btn-radius, 8px);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      width: var(--ps-btn-width, auto);
+      height: var(--ps-btn-height, auto);
+      box-shadow: var(--ps-btn-shadow, none);
+      line-height: 1;
+      white-space: nowrap;
+    }
+
+    .ps-button:hover {
+      background: var(--ps-btn-hover-bg, var(--ps-primary-hover));
+      color: var(--ps-btn-hover-color, var(--ps-btn-color, #111211));
+      transform: translateY(-1px);
+    }
+
+    .ps-button:active {
+      transform: translateY(0);
+    }
+
+    .ps-button svg {
+      width: var(--ps-btn-icon-size, 18px);
+      height: var(--ps-btn-icon-size, 18px);
+      fill: none;
+      stroke: var(--ps-btn-icon-color, currentColor);
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    /* ── Modal Overlay ──────────────────────── */
+    .ps-overlay {
+      position: fixed;
+      inset: 0;
+      background: var(--ps-modal-overlay, var(--ps-overlay));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 999999;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.25s ease, visibility 0.25s ease;
+      padding: 16px;
+    }
+
+    .ps-overlay.ps-open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* ── Modal ──────────────────────────────── */
+    .ps-modal {
+      background: var(--ps-modal-bg, var(--ps-bg));
+      color: var(--ps-modal-color, var(--ps-text));
+      border-radius: var(--ps-modal-radius, var(--ps-radius));
+      width: var(--ps-modal-width, 100%);
+      max-width: var(--ps-modal-max-width, 480px);
+      max-height: 90vh;
+      overflow-y: auto;
+      font-family: var(--ps-modal-font, var(--ps-font));
+      position: relative;
+      transform: translateY(20px) scale(0.97);
+      transition: transform 0.25s ease;
+      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
+    }
+
+    .ps-open .ps-modal {
+      transform: translateY(0) scale(1);
+    }
+
+    /* ── Modal Header ───────────────────────── */
+    .ps-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      background: var(--ps-modal-header-bg, var(--ps-bg-secondary));
+      border-bottom: 1px solid var(--ps-border);
+      border-radius: var(--ps-modal-radius, var(--ps-radius)) var(--ps-modal-radius, var(--ps-radius)) 0 0;
+    }
+
+    .ps-header-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--ps-modal-header-color, var(--ps-text));
+    }
+
+    .ps-close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      color: var(--ps-modal-close-color, var(--ps-text-secondary));
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s;
+    }
+
+    .ps-close:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .ps-close svg {
+      width: 20px;
+      height: 20px;
+      stroke: currentColor;
+      stroke-width: 2;
+      fill: none;
+    }
+
+    /* ── Modal Body ─────────────────────────── */
+    .ps-body {
+      padding: 24px;
+    }
+
+    /* ── Upload Zone ─────────────────────────── */
+    .ps-upload-zone {
+      border: 2px dashed var(--ps-upload-border, var(--ps-border));
+      border-radius: var(--ps-radius);
+      padding: 40px 24px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      background: var(--ps-upload-bg, transparent);
+    }
+
+    .ps-upload-zone:hover,
+    .ps-upload-zone.ps-drag-over {
+      border-color: var(--ps-primary);
+      background: rgba(187, 148, 92, 0.05);
+    }
+
+    .ps-upload-zone input {
+      display: none;
+    }
+
+    .ps-upload-icon {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 12px;
+      stroke: var(--ps-upload-icon-color, var(--ps-primary));
+      fill: none;
+      stroke-width: 1.5;
+    }
+
+    .ps-upload-text {
+      font-size: 14px;
+      color: var(--ps-upload-color, var(--ps-text));
+      margin-bottom: 4px;
+    }
+
+    .ps-upload-hint {
+      font-size: 12px;
+      color: var(--ps-text-secondary);
+    }
+
+    /* ── Preview ────────────────────────────── */
+    .ps-preview {
+      margin-top: 16px;
+      position: relative;
+    }
+
+    .ps-preview img {
+      width: 100%;
+      border-radius: var(--ps-radius);
+      display: block;
+    }
+
+    .ps-preview-remove {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: rgba(0, 0, 0, 0.6);
+      border: none;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      transition: background 0.15s;
+    }
+
+    .ps-preview-remove:hover {
+      background: rgba(0, 0, 0, 0.8);
+    }
+
+    /* ── Submit Button ──────────────────────── */
+    .ps-submit {
+      width: 100%;
+      padding: 14px;
+      margin-top: 20px;
+      background: var(--ps-modal-primary-bg, var(--ps-primary));
+      color: var(--ps-modal-primary-color, #111211);
+      font-family: var(--ps-modal-font, var(--ps-font));
+      font-size: 14px;
+      font-weight: 600;
+      border: none;
+      border-radius: var(--ps-modal-primary-radius, 8px);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .ps-submit:hover:not(:disabled) {
+      opacity: 0.9;
+      transform: translateY(-1px);
+    }
+
+    .ps-submit:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* ── Processing State ───────────────────── */
+    .ps-processing {
+      text-align: center;
+      padding: 40px 24px;
+    }
+
+    .ps-spinner {
+      width: 48px;
+      height: 48px;
+      border: 3px solid var(--ps-border);
+      border-top-color: var(--ps-loader, var(--ps-primary));
+      border-radius: 50%;
+      animation: ps-spin 0.8s linear infinite;
+      margin: 0 auto 16px;
+    }
+
+    @keyframes ps-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    .ps-processing-text {
+      font-size: 14px;
+      color: var(--ps-text);
+      margin-bottom: 4px;
+    }
+
+    .ps-processing-sub {
+      font-size: 12px;
+      color: var(--ps-text-secondary);
+    }
+
+    /* ── Result ─────────────────────────────── */
+    .ps-result {
+      text-align: center;
+    }
+
+    .ps-result img {
+      width: 100%;
+      border-radius: var(--ps-result-radius, var(--ps-radius));
+      display: block;
+      margin-bottom: 16px;
+    }
+
+    .ps-result-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    .ps-result-actions button {
+      flex: 1;
+      padding: 12px;
+      font-family: var(--ps-modal-font, var(--ps-font));
+      font-size: 13px;
+      font-weight: 600;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+      border: none;
+    }
+
+    .ps-btn-download {
+      background: var(--ps-primary);
+      color: #111211;
+    }
+
+    .ps-btn-download:hover {
+      opacity: 0.9;
+    }
+
+    .ps-btn-retry {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--ps-text);
+      border: 1px solid var(--ps-border) !important;
+    }
+
+    .ps-btn-retry:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    /* ── Error State ────────────────────────── */
+    .ps-error {
+      text-align: center;
+      padding: 24px;
+    }
+
+    .ps-error-icon {
+      width: 48px;
+      height: 48px;
+      margin: 0 auto 12px;
+      stroke: var(--ps-error);
+      fill: none;
+      stroke-width: 1.5;
+    }
+
+    .ps-error-text {
+      font-size: 14px;
+      color: var(--ps-error);
+      margin-bottom: 16px;
+    }
+
+    /* ── Powered By ─────────────────────────── */
+    .ps-powered {
+      text-align: center;
+      padding: 12px 24px 16px;
+      font-size: 11px;
+      color: var(--ps-text-secondary);
+    }
+
+    .ps-powered a {
+      color: var(--ps-primary);
+      text-decoration: none;
+    }
+
+    .ps-powered a:hover {
+      text-decoration: underline;
+    }
+  `;
+}
+const ICONS = {
+  camera: `<svg viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>`,
+  upload: `<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`,
+  x: `<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
+  alert: `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`
+};
+class PrimeStyleTryon extends HTMLElement {
+  constructor() {
+    super();
+    this.apiClient = null;
+    this.sseClient = null;
+    this.sseUnsubscribe = null;
+    this.state = "idle";
+    this.selectedFile = null;
+    this.previewUrl = null;
+    this.resultImageUrl = null;
+    this.errorMessage = null;
+    this.currentJobId = null;
+    this.productImageUrl = null;
+    this.buttonStyles = {};
+    this.modalStyles = {};
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return [
+      "api-key",
+      "api-url",
+      "product-image",
+      "button-text",
+      "locale",
+      "show-powered-by",
+      "button-styles",
+      "modal-styles"
+    ];
+  }
+  connectedCallback() {
+    this.init();
+    this.render();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (name === "api-key" || name === "api-url") {
+      this.initApi();
+    }
+    if (name === "product-image") {
+      this.productImageUrl = val;
+    }
+    if (name === "button-styles") {
+      try {
+        this.buttonStyles = JSON.parse(val);
+      } catch {
+      }
+    }
+    if (name === "modal-styles") {
+      try {
+        this.modalStyles = JSON.parse(val);
+      } catch {
+      }
+    }
+    if (this.isConnected) this.render();
+  }
+  // ── Public API ──────────────────────────────
+  /** Configure button appearance programmatically */
+  setButtonStyles(styles) {
+    this.buttonStyles = { ...this.buttonStyles, ...styles };
+    this.applyButtonStyles();
+  }
+  /** Configure modal appearance programmatically */
+  setModalStyles(styles) {
+    this.modalStyles = { ...this.modalStyles, ...styles };
+    this.applyModalStyles();
+  }
+  /** Open the try-on modal */
+  open() {
+    this.state = "upload";
+    this.render();
+    this.emit("ps:open");
+  }
+  /** Close the try-on modal */
+  close() {
+    this.state = "idle";
+    this.resetUpload();
+    this.render();
+    this.emit("ps:close");
+  }
+  /** Detect product image from the current page */
+  detectProduct() {
+    const image = detectProductImage();
+    if (image) {
+      this.productImageUrl = image;
+      this.emit("ps:product-detected", { imageUrl: image });
+    }
+    return image;
+  }
+  // ── Private ─────────────────────────────────
+  init() {
+    const btnStylesAttr = this.getAttribute("button-styles");
+    if (btnStylesAttr) {
+      try {
+        this.buttonStyles = JSON.parse(btnStylesAttr);
+      } catch {
+      }
+    }
+    const modalStylesAttr = this.getAttribute("modal-styles");
+    if (modalStylesAttr) {
+      try {
+        this.modalStyles = JSON.parse(modalStylesAttr);
+      } catch {
+      }
+    }
+    this.productImageUrl = this.getAttribute("product-image") || null;
+    if (!this.productImageUrl) {
+      this.productImageUrl = detectProductImage();
+      if (this.productImageUrl) {
+        this.emit("ps:product-detected", { imageUrl: this.productImageUrl });
+      }
+    }
+    this.initApi();
+  }
+  initApi() {
+    const apiKey = this.getAttribute("api-key");
+    if (!apiKey) return;
+    const apiUrl = this.getAttribute("api-url") || void 0;
+    this.apiClient = new ApiClient(apiKey, apiUrl);
+    this.sseClient = new SseClient(this.apiClient.getStreamUrl());
+  }
+  cleanup() {
+    if (this.sseUnsubscribe) {
+      this.sseUnsubscribe();
+      this.sseUnsubscribe = null;
+    }
+    if (this.sseClient) {
+      this.sseClient.disconnect();
+      this.sseClient = null;
+    }
+    if (this.previewUrl) {
+      URL.revokeObjectURL(this.previewUrl);
+    }
+  }
+  emit(name, detail) {
+    this.dispatchEvent(
+      new CustomEvent(name, { bubbles: true, composed: true, detail })
+    );
+  }
+  get buttonText() {
+    return this.getAttribute("button-text") || "Virtual Try-On";
+  }
+  get showPoweredBy() {
+    const attr = this.getAttribute("show-powered-by");
+    return attr !== "false";
+  }
+  // ── Rendering ───────────────────────────────
+  render() {
+    this.shadow.innerHTML = "";
+    const style = document.createElement("style");
+    style.textContent = getStyles();
+    this.shadow.appendChild(style);
+    const button = this.createButton();
+    this.shadow.appendChild(button);
+    if (this.state !== "idle") {
+      const overlay = this.createModal();
+      this.shadow.appendChild(overlay);
+      requestAnimationFrame(() => overlay.classList.add("ps-open"));
+    }
+    this.applyButtonStyles();
+    this.applyModalStyles();
+  }
+  createButton() {
+    const btn = document.createElement("button");
+    btn.className = "ps-button";
+    btn.innerHTML = `${ICONS.camera}<span>${this.buttonText}</span>`;
+    btn.addEventListener("click", () => this.open());
+    return btn;
+  }
+  createModal() {
+    const overlay = document.createElement("div");
+    overlay.className = "ps-overlay";
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) this.close();
+    });
+    const modal = document.createElement("div");
+    modal.className = "ps-modal";
+    const header = document.createElement("div");
+    header.className = "ps-header";
+    header.innerHTML = `
+      <span class="ps-header-title">Virtual Try-On</span>
+    `;
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "ps-close";
+    closeBtn.innerHTML = ICONS.x;
+    closeBtn.addEventListener("click", () => this.close());
+    header.appendChild(closeBtn);
+    modal.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "ps-body";
+    switch (this.state) {
+      case "upload":
+        body.appendChild(this.createUploadView());
+        break;
+      case "processing":
+        body.appendChild(this.createProcessingView());
+        break;
+      case "result":
+        body.appendChild(this.createResultView());
+        break;
+      case "error":
+        body.appendChild(this.createErrorView());
+        break;
+    }
+    modal.appendChild(body);
+    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>`;
+      modal.appendChild(powered);
+    }
+    overlay.appendChild(modal);
+    return overlay;
+  }
+  createUploadView() {
+    const frag = document.createDocumentFragment();
+    if (this.selectedFile && this.previewUrl) {
+      const preview = document.createElement("div");
+      preview.className = "ps-preview";
+      const img = document.createElement("img");
+      img.src = this.previewUrl;
+      img.alt = "Your photo";
+      preview.appendChild(img);
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "ps-preview-remove";
+      removeBtn.textContent = "×";
+      removeBtn.addEventListener("click", () => {
+        this.resetUpload();
+        this.render();
+      });
+      preview.appendChild(removeBtn);
+      frag.appendChild(preview);
+      const submit = document.createElement("button");
+      submit.className = "ps-submit";
+      submit.textContent = "Try It On";
+      submit.addEventListener("click", () => this.handleSubmit());
+      frag.appendChild(submit);
+    } else {
+      const zone = document.createElement("div");
+      zone.className = "ps-upload-zone";
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/jpeg,image/png,image/webp";
+      input.addEventListener("change", (e) => {
+        const file = e.target.files?.[0];
+        if (file) this.handleFileSelect(file);
+      });
+      zone.innerHTML = `
+        <svg class="ps-upload-icon" viewBox="0 0 24 24">${ICONS.upload.replace(/<\/?svg[^>]*>/g, "")}</svg>
+        <p class="ps-upload-text">Drop your photo here or click to upload</p>
+        <p class="ps-upload-hint">JPEG, PNG or WebP (max 10MB)</p>
+      `;
+      zone.appendChild(input);
+      zone.addEventListener("click", () => input.click());
+      zone.addEventListener("dragover", (e) => {
+        e.preventDefault();
+        zone.classList.add("ps-drag-over");
+      });
+      zone.addEventListener("dragleave", () => {
+        zone.classList.remove("ps-drag-over");
+      });
+      zone.addEventListener("drop", (e) => {
+        e.preventDefault();
+        zone.classList.remove("ps-drag-over");
+        const file = e.dataTransfer?.files?.[0];
+        if (file) this.handleFileSelect(file);
+      });
+      frag.appendChild(zone);
+    }
+    return frag;
+  }
+  createProcessingView() {
+    const div = document.createElement("div");
+    div.className = "ps-processing";
+    div.innerHTML = `
+      <div class="ps-spinner"></div>
+      <p class="ps-processing-text">Generating your try-on...</p>
+      <p class="ps-processing-sub">This usually takes 15-20 seconds</p>
+    `;
+    return div;
+  }
+  createResultView() {
+    const div = document.createElement("div");
+    div.className = "ps-result";
+    if (this.resultImageUrl) {
+      const img = document.createElement("img");
+      img.src = this.resultImageUrl;
+      img.alt = "Try-on result";
+      div.appendChild(img);
+    }
+    const actions = document.createElement("div");
+    actions.className = "ps-result-actions";
+    const downloadBtn = document.createElement("button");
+    downloadBtn.className = "ps-btn-download";
+    downloadBtn.textContent = "Download";
+    downloadBtn.addEventListener("click", () => this.handleDownload());
+    actions.appendChild(downloadBtn);
+    const retryBtn = document.createElement("button");
+    retryBtn.className = "ps-btn-retry";
+    retryBtn.textContent = "Try Another";
+    retryBtn.addEventListener("click", () => {
+      this.resetUpload();
+      this.state = "upload";
+      this.render();
+    });
+    actions.appendChild(retryBtn);
+    div.appendChild(actions);
+    return div;
+  }
+  createErrorView() {
+    const div = document.createElement("div");
+    div.className = "ps-error";
+    div.innerHTML = `
+      <svg class="ps-error-icon" viewBox="0 0 24 24">${ICONS.alert.replace(/<\/?svg[^>]*>/g, "")}</svg>
+      <p class="ps-error-text">${this.errorMessage || "Something went wrong"}</p>
+    `;
+    const retryBtn = document.createElement("button");
+    retryBtn.className = "ps-submit";
+    retryBtn.textContent = "Try Again";
+    retryBtn.addEventListener("click", () => {
+      this.state = "upload";
+      this.errorMessage = null;
+      this.render();
+    });
+    div.appendChild(retryBtn);
+    return div;
+  }
+  // ── Handlers ────────────────────────────────
+  handleFileSelect(file) {
+    if (!isValidImageFile(file)) {
+      this.errorMessage = "Please upload a JPEG, PNG, or WebP image.";
+      this.state = "error";
+      this.render();
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      this.errorMessage = "Image must be under 10MB.";
+      this.state = "error";
+      this.render();
+      return;
+    }
+    this.selectedFile = file;
+    this.previewUrl = URL.createObjectURL(file);
+    this.emit("ps:upload", { file });
+    this.render();
+  }
+  async handleSubmit() {
+    if (!this.selectedFile || !this.apiClient || !this.sseClient) {
+      this.errorMessage = "SDK not configured. Please provide an API key.";
+      this.state = "error";
+      this.render();
+      return;
+    }
+    if (!this.productImageUrl) {
+      this.errorMessage = "No product image found. Please set the product-image attribute.";
+      this.state = "error";
+      this.render();
+      return;
+    }
+    this.state = "processing";
+    this.render();
+    try {
+      const modelImage = await compressImage(this.selectedFile);
+      const response = await this.apiClient.submitTryOn(
+        modelImage,
+        this.productImageUrl
+      );
+      this.currentJobId = response.jobId;
+      this.emit("ps:processing", { jobId: response.jobId });
+      this.sseUnsubscribe = this.sseClient.onJob(
+        response.jobId,
+        (update) => this.handleVtoUpdate(update)
+      );
+      this.startPolling(response.jobId);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to start try-on";
+      this.errorMessage = message;
+      this.state = "error";
+      this.emit("ps:error", { message, code: err?.code });
+      this.render();
+    }
+  }
+  handleVtoUpdate(update) {
+    if (update.status === "completed" && update.imageUrl) {
+      if (this.state !== "result" || this.resultImageUrl?.startsWith("data:") && !update.imageUrl.startsWith("data:")) {
+        this.resultImageUrl = update.imageUrl;
+        this.state = "result";
+        this.emit("ps:complete", {
+          jobId: update.galleryId,
+          imageUrl: update.imageUrl
+        });
+        this.render();
+      }
+    } else if (update.status === "failed") {
+      this.errorMessage = update.error || "Try-on generation failed";
+      this.state = "error";
+      this.emit("ps:error", { message: this.errorMessage });
+      this.render();
+    }
+  }
+  startPolling(jobId) {
+    let attempts = 0;
+    const maxAttempts = 60;
+    const interval = setInterval(async () => {
+      attempts++;
+      if (attempts > maxAttempts || this.state === "result" || this.state === "idle") {
+        clearInterval(interval);
+        return;
+      }
+      if (!this.apiClient) {
+        clearInterval(interval);
+        return;
+      }
+      try {
+        const status = await this.apiClient.getStatus(jobId);
+        if (status.status === "completed" && status.imageUrl) {
+          if (this.state === "processing") {
+            this.handleVtoUpdate({
+              galleryId: jobId,
+              status: "completed",
+              imageUrl: status.imageUrl,
+              error: null,
+              timestamp: Date.now()
+            });
+          }
+          clearInterval(interval);
+        } else if (status.status === "failed") {
+          if (this.state === "processing") {
+            this.handleVtoUpdate({
+              galleryId: jobId,
+              status: "failed",
+              imageUrl: null,
+              error: status.message,
+              timestamp: Date.now()
+            });
+          }
+          clearInterval(interval);
+        }
+      } catch {
+      }
+    }, 2e3);
+  }
+  handleDownload() {
+    if (!this.resultImageUrl) return;
+    const link = document.createElement("a");
+    link.href = this.resultImageUrl;
+    link.download = `primestyle-tryon-${Date.now()}.png`;
+    link.target = "_blank";
+    if (this.resultImageUrl.startsWith("data:")) {
+      link.click();
+    } else {
+      fetch(this.resultImageUrl).then((r) => r.blob()).then((blob) => {
+        const url = URL.createObjectURL(blob);
+        link.href = url;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+      }).catch(() => {
+        window.open(this.resultImageUrl, "_blank");
+      });
+    }
+  }
+  resetUpload() {
+    if (this.previewUrl) {
+      URL.revokeObjectURL(this.previewUrl);
+    }
+    this.selectedFile = null;
+    this.previewUrl = null;
+    this.resultImageUrl = null;
+    this.errorMessage = null;
+    this.currentJobId = null;
+    if (this.sseUnsubscribe) {
+      this.sseUnsubscribe();
+      this.sseUnsubscribe = null;
+    }
+  }
+  // ── Custom Style Application ────────────────
+  applyButtonStyles() {
+    const btn = this.shadow.querySelector(".ps-button");
+    if (!btn) return;
+    const map = {
+      backgroundColor: "--ps-btn-bg",
+      textColor: "--ps-btn-color",
+      borderRadius: "--ps-btn-radius",
+      fontSize: "--ps-btn-font-size",
+      fontFamily: "--ps-btn-font",
+      fontWeight: "--ps-btn-font-weight",
+      padding: "--ps-btn-padding",
+      border: "--ps-btn-border",
+      width: "--ps-btn-width",
+      height: "--ps-btn-height",
+      hoverBackgroundColor: "--ps-btn-hover-bg",
+      hoverTextColor: "--ps-btn-hover-color",
+      iconSize: "--ps-btn-icon-size",
+      iconColor: "--ps-btn-icon-color",
+      boxShadow: "--ps-btn-shadow"
+    };
+    for (const [key, cssVar] of Object.entries(map)) {
+      const value = this.buttonStyles[key];
+      if (value) {
+        this.style.setProperty(cssVar, value);
+      }
+    }
+  }
+  applyModalStyles() {
+    const map = {
+      overlayColor: "--ps-modal-overlay",
+      backgroundColor: "--ps-modal-bg",
+      textColor: "--ps-modal-color",
+      borderRadius: "--ps-modal-radius",
+      width: "--ps-modal-width",
+      maxWidth: "--ps-modal-max-width",
+      fontFamily: "--ps-modal-font",
+      headerBackgroundColor: "--ps-modal-header-bg",
+      headerTextColor: "--ps-modal-header-color",
+      closeButtonColor: "--ps-modal-close-color",
+      uploadBorderColor: "--ps-upload-border",
+      uploadBackgroundColor: "--ps-upload-bg",
+      uploadTextColor: "--ps-upload-color",
+      uploadIconColor: "--ps-upload-icon-color",
+      primaryButtonBackgroundColor: "--ps-modal-primary-bg",
+      primaryButtonTextColor: "--ps-modal-primary-color",
+      primaryButtonBorderRadius: "--ps-modal-primary-radius",
+      loaderColor: "--ps-loader",
+      resultBorderRadius: "--ps-result-radius"
+    };
+    for (const [key, cssVar] of Object.entries(map)) {
+      const value = this.modalStyles[key];
+      if (value) {
+        this.style.setProperty(cssVar, value);
+      }
+    }
+  }
+}
+if (typeof window !== "undefined" && !customElements.get("primestyle-tryon")) {
+  customElements.define("primestyle-tryon", PrimeStyleTryon);
+}
+export {
+  ApiClient,
+  PrimeStyleError,
+  PrimeStyleTryon,
+  SseClient,
+  compressImage,
+  detectProductImage,
+  isValidImageFile
+};