@primestyleai/tryon 1.0.1 → 1.2.0

package/dist/react/index.js

@@ -0,0 +1,771 @@
+"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";
+function cx(base, override) {
+  return override ? `${base} ${override}` : base;
+}
+function CameraIcon({ size = 18 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("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" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "4" })
+      ]
+    }
+  );
+}
+function UploadIcon({ size = 48 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+        /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+      ]
+    }
+  );
+}
+function XIcon({ size = 20 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function AlertIcon({ size = 48 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ]
+    }
+  );
+}
+function getApiKey() {
+  const key = process.env.NEXT_PUBLIC_PRIMESTYLE_API_KEY ?? "";
+  if (!key) {
+    throw new PrimeStyleError(
+      "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY in environment variables",
+      "MISSING_API_KEY"
+    );
+  }
+  return key;
+}
+function getApiUrl(override) {
+  return override || process.env.NEXT_PUBLIC_PRIMESTYLE_API_URL || "https://api.primestyleai.com";
+}
+function PrimeStyleTryon({
+  productImage,
+  buttonText = "Virtual Try-On",
+  apiUrl,
+  showPoweredBy = true,
+  buttonStyles: btnS = {},
+  modalStyles: mdlS = {},
+  classNames: cn = {},
+  className,
+  style,
+  onOpen,
+  onClose,
+  onUpload,
+  onProcessing,
+  onComplete,
+  onError
+}) {
+  const [view, setView] = useState("idle");
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [resultImageUrl, setResultImageUrl] = useState(null);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [dragOver, setDragOver] = useState(false);
+  const fileInputRef = useRef(null);
+  const apiRef = useRef(null);
+  const sseRef = useRef(null);
+  const unsubRef = useRef(null);
+  const pollingRef = useRef(null);
+  useEffect(() => {
+    try {
+      const key = getApiKey();
+      const url = getApiUrl(apiUrl);
+      apiRef.current = new ApiClient(key, url);
+      sseRef.current = new SseClient(apiRef.current.getStreamUrl());
+    } catch {
+    }
+    return () => {
+      unsubRef.current?.();
+      sseRef.current?.disconnect();
+      if (pollingRef.current) clearInterval(pollingRef.current);
+    };
+  }, [apiUrl]);
+  useEffect(() => {
+    return () => {
+      if (previewUrl) URL.revokeObjectURL(previewUrl);
+    };
+  }, [previewUrl]);
+  const handleOpen = useCallback(() => {
+    setView("upload");
+    onOpen?.();
+  }, [onOpen]);
+  const handleClose = useCallback(() => {
+    setView("idle");
+    setSelectedFile(null);
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    setPreviewUrl(null);
+    setResultImageUrl(null);
+    setErrorMessage(null);
+    unsubRef.current?.();
+    unsubRef.current = null;
+    if (pollingRef.current) {
+      clearInterval(pollingRef.current);
+      pollingRef.current = null;
+    }
+    onClose?.();
+  }, [onClose, previewUrl]);
+  const handleFileSelect = useCallback(
+    (file) => {
+      if (!isValidImageFile(file)) {
+        setErrorMessage("Please upload a JPEG, PNG, or WebP image.");
+        setView("error");
+        onError?.({ message: "Invalid file type", code: "INVALID_FILE" });
+        return;
+      }
+      if (file.size > 10 * 1024 * 1024) {
+        setErrorMessage("Image must be under 10MB.");
+        setView("error");
+        onError?.({ message: "File too large", code: "FILE_TOO_LARGE" });
+        return;
+      }
+      setSelectedFile(file);
+      setPreviewUrl(URL.createObjectURL(file));
+      onUpload?.(file);
+    },
+    [onUpload, onError]
+  );
+  const handleRemovePreview = useCallback(() => {
+    setSelectedFile(null);
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    setPreviewUrl(null);
+  }, [previewUrl]);
+  const handleVtoUpdate = useCallback(
+    (update, currentView) => {
+      if (update.status === "completed" && update.imageUrl) {
+        setResultImageUrl((prev) => {
+          if (prev?.startsWith("data:") || !prev) return update.imageUrl;
+          if (!update.imageUrl.startsWith("data:")) return update.imageUrl;
+          return prev;
+        });
+        if (currentView !== "result") {
+          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 });
+      }
+    },
+    [onComplete, onError]
+  );
+  const handleSubmit = useCallback(async () => {
+    if (!selectedFile || !apiRef.current || !sseRef.current) {
+      const msg = !apiRef.current ? "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY in environment variables" : "No file selected";
+      setErrorMessage(msg);
+      setView("error");
+      onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
+      return;
+    }
+    setView("processing");
+    try {
+      const modelImage = await compressImage(selectedFile);
+      const response = await apiRef.current.submitTryOn(
+        modelImage,
+        productImage
+      );
+      onProcessing?.(response.jobId);
+      unsubRef.current = sseRef.current.onJob(
+        response.jobId,
+        (update) => handleVtoUpdate(update, view)
+      );
+      let attempts = 0;
+      pollingRef.current = setInterval(async () => {
+        attempts++;
+        if (attempts > 60) {
+          if (pollingRef.current) clearInterval(pollingRef.current);
+          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);
+          }
+        } catch {
+        }
+      }, 2e3);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to start try-on";
+      const code = err instanceof PrimeStyleError ? err.code : void 0;
+      setErrorMessage(message);
+      setView("error");
+      onError?.({ message, code });
+    }
+  }, [selectedFile, productImage, onProcessing, onError, handleVtoUpdate, view]);
+  const handleDownload = useCallback(() => {
+    if (!resultImageUrl) return;
+    if (resultImageUrl.startsWith("data:")) {
+      const link = document.createElement("a");
+      link.href = resultImageUrl;
+      link.download = `primestyle-tryon-${Date.now()}.png`;
+      link.click();
+    } else {
+      fetch(resultImageUrl).then((r) => r.blob()).then((blob) => {
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = `primestyle-tryon-${Date.now()}.png`;
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+      }).catch(() => window.open(resultImageUrl, "_blank"));
+    }
+  }, [resultImageUrl]);
+  const handleRetry = useCallback(() => {
+    setSelectedFile(null);
+    if (previewUrl) URL.revokeObjectURL(previewUrl);
+    setPreviewUrl(null);
+    setResultImageUrl(null);
+    setErrorMessage(null);
+    setView("upload");
+  }, [previewUrl]);
+  const rootVars = {
+    "--ps-btn-bg": btnS.backgroundColor,
+    "--ps-btn-color": btnS.textColor,
+    "--ps-btn-radius": btnS.borderRadius,
+    "--ps-btn-font-size": btnS.fontSize,
+    "--ps-btn-font": btnS.fontFamily,
+    "--ps-btn-font-weight": btnS.fontWeight,
+    "--ps-btn-padding": btnS.padding,
+    "--ps-btn-border": btnS.border,
+    "--ps-btn-width": btnS.width,
+    "--ps-btn-height": btnS.height,
+    "--ps-btn-hover-bg": btnS.hoverBackgroundColor,
+    "--ps-btn-hover-color": btnS.hoverTextColor,
+    "--ps-btn-icon-size": btnS.iconSize,
+    "--ps-btn-icon-color": btnS.iconColor,
+    "--ps-btn-shadow": btnS.boxShadow,
+    "--ps-modal-overlay": mdlS.overlayColor,
+    "--ps-modal-bg": mdlS.backgroundColor,
+    "--ps-modal-color": mdlS.textColor,
+    "--ps-modal-radius": mdlS.borderRadius,
+    "--ps-modal-width": mdlS.width,
+    "--ps-modal-max-width": mdlS.maxWidth,
+    "--ps-modal-font": mdlS.fontFamily,
+    "--ps-modal-header-bg": mdlS.headerBackgroundColor,
+    "--ps-modal-header-color": mdlS.headerTextColor,
+    "--ps-modal-close-color": mdlS.closeButtonColor,
+    "--ps-upload-border": mdlS.uploadBorderColor,
+    "--ps-upload-bg": mdlS.uploadBackgroundColor,
+    "--ps-upload-color": mdlS.uploadTextColor,
+    "--ps-upload-icon-color": mdlS.uploadIconColor,
+    "--ps-modal-primary-bg": mdlS.primaryButtonBackgroundColor,
+    "--ps-modal-primary-color": mdlS.primaryButtonTextColor,
+    "--ps-modal-primary-radius": mdlS.primaryButtonBorderRadius,
+    "--ps-loader": mdlS.loaderColor,
+    "--ps-result-radius": mdlS.resultBorderRadius
+  };
+  const cssVars = Object.fromEntries(
+    Object.entries(rootVars).filter(([, v]) => v !== void 0)
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("ps-tryon-root", cn.root || className),
+      style: { ...cssVars, ...style },
+      "data-ps-tryon": true,
+      children: [
+        /* @__PURE__ */ jsxs("button", { onClick: handleOpen, className: cx("ps-tryon-btn", cn.button), children: [
+          /* @__PURE__ */ jsx(CameraIcon, { size: parseInt(btnS.iconSize || "18") }),
+          /* @__PURE__ */ jsx("span", { children: buttonText })
+        ] }),
+        view !== "idle" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx("ps-tryon-overlay", cn.overlay),
+            onClick: (e) => {
+              if (e.target === e.currentTarget) handleClose();
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cx("ps-tryon-modal", cn.modal),
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header", cn.header), children: [
+                    /* @__PURE__ */ jsx("span", { className: cx("ps-tryon-title", cn.title), children: "Virtual Try-On" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleClose,
+                        className: cx("ps-tryon-close", cn.closeButton),
+                        children: /* @__PURE__ */ jsx(XIcon, {})
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-body", cn.body), children: [
+                    view === "upload" && /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
+                        /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: previewUrl,
+                            alt: "Your photo",
+                            className: cn.previewImage
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            onClick: handleRemovePreview,
+                            className: cx(
+                              "ps-tryon-preview-remove",
+                              cn.removeButton
+                            ),
+                            children: "×"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: handleSubmit,
+                          className: cx("ps-tryon-submit", cn.submitButton),
+                          children: "Try It On"
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cx(
+                          `ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`,
+                          cn.uploadZone
+                        ),
+                        onClick: () => fileInputRef.current?.click(),
+                        onDragOver: (e) => {
+                          e.preventDefault();
+                          setDragOver(true);
+                        },
+                        onDragLeave: () => setDragOver(false),
+                        onDrop: (e) => {
+                          e.preventDefault();
+                          setDragOver(false);
+                          const file = e.dataTransfer?.files?.[0];
+                          if (file) handleFileSelect(file);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              ref: fileInputRef,
+                              type: "file",
+                              accept: "image/jpeg,image/png,image/webp",
+                              style: { display: "none" },
+                              onChange: (e) => {
+                                const file = e.target.files?.[0];
+                                if (file) handleFileSelect(file);
+                              }
+                            }
+                          ),
+                          /* @__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-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__ */ jsx(
+                        "p",
+                        {
+                          className: cx(
+                            "ps-tryon-processing-text",
+                            cn.processingText
+                          ),
+                          children: "Generating your try-on..."
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cx(
+                            "ps-tryon-processing-sub",
+                            cn.processingSubText
+                          ),
+                          children: "This usually takes 15-20 seconds"
+                        }
+                      )
+                    ] }),
+                    view === "result" && resultImageUrl && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-result", cn.result), children: [
+                      /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: resultImageUrl,
+                          alt: "Try-on result",
+                          className: cn.resultImage
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: cx(
+                            "ps-tryon-result-actions",
+                            cn.resultActions
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: handleDownload,
+                                className: cx("ps-tryon-btn-download", cn.downloadButton),
+                                children: "Download"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: handleRetry,
+                                className: cx("ps-tryon-btn-retry", cn.retryButton),
+                                children: "Try Another"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] }),
+                    view === "error" && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-error", cn.error), children: [
+                      /* @__PURE__ */ jsx(AlertIcon, {}),
+                      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-error-text", cn.errorText), children: errorMessage || "Something went wrong" }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: handleRetry,
+                          className: cx("ps-tryon-submit", cn.submitButton),
+                          children: "Try Again"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  showPoweredBy && /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-powered", cn.poweredBy), children: [
+                    "Powered by",
+                    " ",
+                    /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: "https://primestyleai.com",
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: "PrimeStyle AI"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+        .ps-tryon-root {
+          display: inline-block;
+        }
+
+        .ps-tryon-btn {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          padding: var(--ps-btn-padding, 12px 24px);
+          background: var(--ps-btn-bg, #bb945c);
+          color: var(--ps-btn-color, #111211);
+          font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
+          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-tryon-btn:hover {
+          background: var(--ps-btn-hover-bg, #a07d4e);
+          color: var(--ps-btn-hover-color, var(--ps-btn-color, #111211));
+          transform: translateY(-1px);
+        }
+        .ps-tryon-btn:active { transform: translateY(0); }
+
+        .ps-tryon-overlay {
+          position: fixed;
+          inset: 0;
+          background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 999999;
+          padding: 16px;
+          animation: ps-fade-in 0.2s ease;
+        }
+        @keyframes ps-fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        .ps-tryon-modal {
+          background: var(--ps-modal-bg, #111211);
+          color: var(--ps-modal-color, #ffffff);
+          border-radius: var(--ps-modal-radius, 12px);
+          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, system-ui, -apple-system, sans-serif);
+          box-shadow: 0 25px 50px rgba(0,0,0,0.4);
+          animation: ps-slide-up 0.25s ease;
+        }
+        @keyframes ps-slide-up {
+          from { transform: translateY(20px) scale(0.97); opacity: 0; }
+          to { transform: translateY(0) scale(1); opacity: 1; }
+        }
+
+        .ps-tryon-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 20px 24px;
+          background: var(--ps-modal-header-bg, #1a1b1a);
+          border-bottom: 1px solid #333;
+          border-radius: var(--ps-modal-radius, 12px) var(--ps-modal-radius, 12px) 0 0;
+        }
+        .ps-tryon-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--ps-modal-header-color, #fff);
+        }
+        .ps-tryon-close {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: none;
+          border: none;
+          color: var(--ps-modal-close-color, #999);
+          cursor: pointer;
+          border-radius: 6px;
+          transition: background 0.15s;
+        }
+        .ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
+
+        .ps-tryon-body { padding: 24px; }
+
+        .ps-tryon-upload {
+          border: 2px dashed var(--ps-upload-border, #333);
+          border-radius: 12px;
+          padding: 40px 24px;
+          text-align: center;
+          cursor: pointer;
+          transition: all 0.2s;
+          background: var(--ps-upload-bg, transparent);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        .ps-tryon-upload:hover, .ps-tryon-drag-over {
+          border-color: #bb945c;
+          background: rgba(187,148,92,0.05);
+        }
+        .ps-tryon-upload svg {
+          color: var(--ps-upload-icon-color, #bb945c);
+          margin-bottom: 12px;
+        }
+        .ps-tryon-upload-text {
+          font-size: 14px;
+          color: var(--ps-upload-color, #fff);
+          margin: 0 0 4px;
+        }
+        .ps-tryon-upload-hint {
+          font-size: 12px;
+          color: #999;
+          margin: 0;
+        }
+
+        .ps-tryon-preview {
+          position: relative;
+          margin-bottom: 4px;
+        }
+        .ps-tryon-preview img {
+          width: 100%;
+          border-radius: 12px;
+          display: block;
+        }
+        .ps-tryon-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-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }
+
+        .ps-tryon-submit {
+          width: 100%;
+          padding: 14px;
+          margin-top: 20px;
+          background: var(--ps-modal-primary-bg, #bb945c);
+          color: var(--ps-modal-primary-color, #111211);
+          font-family: var(--ps-modal-font, system-ui, sans-serif);
+          font-size: 14px;
+          font-weight: 600;
+          border: none;
+          border-radius: var(--ps-modal-primary-radius, 8px);
+          cursor: pointer;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+        .ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }
+        .ps-tryon-submit:disabled { opacity: 0.5; cursor: not-allowed; }
+
+        .ps-tryon-processing {
+          text-align: center;
+          padding: 40px 24px;
+        }
+        .ps-tryon-spinner {
+          width: 48px;
+          height: 48px;
+          border: 3px solid #333;
+          border-top-color: var(--ps-loader, #bb945c);
+          border-radius: 50%;
+          animation: ps-spin 0.8s linear infinite;
+          margin: 0 auto 16px;
+        }
+        @keyframes ps-spin { to { transform: rotate(360deg); } }
+        .ps-tryon-processing-text { font-size: 14px; color: #fff; margin: 0 0 4px; }
+        .ps-tryon-processing-sub { font-size: 12px; color: #999; margin: 0; }
+
+        .ps-tryon-result { text-align: center; }
+        .ps-tryon-result img {
+          width: 100%;
+          border-radius: var(--ps-result-radius, 12px);
+          display: block;
+          margin-bottom: 16px;
+        }
+        .ps-tryon-result-actions { display: flex; gap: 8px; }
+        .ps-tryon-result-actions button {
+          flex: 1;
+          padding: 12px;
+          font-family: var(--ps-modal-font, system-ui, sans-serif);
+          font-size: 13px;
+          font-weight: 600;
+          border-radius: 8px;
+          cursor: pointer;
+          transition: all 0.2s;
+          border: none;
+        }
+        .ps-tryon-btn-download { background: #bb945c; color: #111211; }
+        .ps-tryon-btn-download:hover { opacity: 0.9; }
+        .ps-tryon-btn-retry {
+          background: rgba(255,255,255,0.1);
+          color: #fff;
+          border: 1px solid #333 !important;
+        }
+        .ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.15); }
+
+        .ps-tryon-error {
+          text-align: center;
+          padding: 24px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        .ps-tryon-error svg { color: #ef4444; margin-bottom: 12px; }
+        .ps-tryon-error-text { font-size: 14px; color: #ef4444; margin: 0 0 16px; }
+
+        .ps-tryon-powered {
+          text-align: center;
+          padding: 12px 24px 16px;
+          font-size: 11px;
+          color: #999;
+        }
+        .ps-tryon-powered a { color: #bb945c; text-decoration: none; }
+        .ps-tryon-powered a:hover { text-decoration: underline; }
+      ` })
+      ]
+    }
+  );
+}
+export {
+  PrimeStyleTryon
+};