@primestyleai/tryon 5.10.89 → 5.10.91

package/dist/react/views/ProcessingView.d.ts

@@ -1,6 +1,15 @@
 import type { PrimeStyleClassNames } from "../../types";
 import type { TranslateFn } from "../../i18n";
-export declare function ProcessingView({ previewUrl, progressRef, progressBarRef, progressTextRef, progressStatusRef, progressEtaRef, progressRingRef, cn, t, }: {
+/**
+ * Engaging try-on processing screen — 65/35 split.
+ *  Left  (~65%): user's photo + scanning overlay
+ *  Right (~35%): big % ring → "WHILE YOU WAIT" cards (style tip /
+ *                garment spotlight / AI fact) → cancel link.
+ *
+ * Distracts the user from the 25s wait by feeding them branded micro-
+ * content tied to their actual purchase context.
+ */
+export declare function ProcessingView({ previewUrl, progressRef, progressBarRef, progressTextRef, progressStatusRef, progressEtaRef, progressRingRef, productTitle, productMaterial, productDescription, onCancel, cn, t, }: {
     previewUrl: string | null;
     progressRef: React.MutableRefObject<number>;
     progressBarRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -8,6 +17,10 @@ export declare function ProcessingView({ previewUrl, progressRef, progressBarRef
     progressStatusRef: React.MutableRefObject<HTMLDivElement | null>;
     progressEtaRef: React.MutableRefObject<HTMLSpanElement | null>;
     progressRingRef: React.MutableRefObject<SVGCircleElement | null>;
+    productTitle?: string;
+    productMaterial?: string;
+    productDescription?: string;
+    onCancel?: () => void;
     cn: PrimeStyleClassNames;
     t: TranslateFn;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/storefront/primestyle-tryon.js

@@ -12081,6 +12081,184 @@ const STYLES$1 = `
   }
   .ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }
 
+  /* ──────────────────────────────────────────────
+     ProcessingView v2 — split (image left ~65%,
+     panel right ~35%) with engaging cards while
+     the user waits 25s for the try-on to complete.
+     ────────────────────────────────────────────── */
+  .ps-tryon-processing-v2 {
+    display: flex; gap: 1.2vw;
+    padding: 1.2vw;
+    width: 100%; height: 100%;
+    align-items: stretch;
+  }
+  .ps-tryon-processing-v2-image {
+    flex: 0 0 62%;
+    position: relative;
+    border-radius: 0.6vw;
+    overflow: hidden;
+    background: var(--ps-bg-tertiary, #f3f4f6);
+    min-height: 28vw;
+  }
+  .ps-tryon-processing-v2-image .ps-tryon-processing-blur,
+  .ps-tryon-processing-v2-image .ps-tryon-processing-model {
+    position: absolute; inset: 0;
+    width: 100%; height: 100%;
+  }
+  .ps-tryon-processing-v2-image .ps-tryon-processing-blur {
+    background-size: cover; background-position: center;
+    filter: blur(40px) brightness(0.8); opacity: 0.65;
+  }
+  .ps-tryon-processing-v2-image .ps-tryon-processing-model {
+    object-fit: contain; z-index: 1;
+  }
+  .ps-tryon-processing-v2-badge {
+    position: absolute; top: 0.8vw; left: 0.8vw; z-index: 3;
+    display: inline-flex; align-items: center; gap: 0.4vw;
+    padding: 0.4vw 0.7vw;
+    background: rgba(33, 84, 239, 0.10);
+    color: var(--ps-accent);
+    border: 1px solid rgba(33, 84, 239, 0.20);
+    border-radius: 999px;
+    font-size: 0.6vw; font-weight: 700;
+    letter-spacing: 0.12em;
+  }
+  .ps-tryon-processing-v2-badge-dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: var(--ps-accent);
+    animation: ps-pulse-dot 1.4s ease-in-out infinite;
+  }
+  @keyframes ps-pulse-dot {
+    0%, 100% { opacity: 0.3; transform: scale(0.85); }
+    50%      { opacity: 1;   transform: scale(1.1); }
+  }
+
+  .ps-tryon-processing-v2-panel {
+    flex: 1 1 38%;
+    display: flex; flex-direction: column;
+    gap: 0.9vw;
+    padding: 0.6vw 0.4vw;
+    min-width: 0;
+  }
+  .ps-tryon-processing-v2-head {
+    text-align: center;
+  }
+  .ps-tryon-processing-v2-title {
+    margin: 0;
+    font-size: 1.1vw; font-weight: 700;
+    color: var(--ps-text-primary);
+    line-height: 1.25;
+  }
+  .ps-tryon-processing-v2-sub {
+    margin: 0.3vw 0 0;
+    font-size: 0.68vw; line-height: 1.45;
+    color: var(--ps-text-secondary);
+  }
+
+  .ps-tryon-processing-v2-ring-wrap {
+    position: relative;
+    width: 120px; height: 120px;
+    margin: 0.4vw auto 0;
+  }
+  .ps-tryon-processing-v2-ring-wrap svg {
+    transform: rotate(-90deg);
+  }
+  .ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-track {
+    fill: none; stroke: var(--ps-border-color); stroke-width: 6;
+  }
+  .ps-tryon-processing-v2-ring-wrap .ps-tryon-progress-ring-fill {
+    fill: none; stroke: var(--ps-accent); stroke-width: 6;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.3s ease;
+  }
+  .ps-tryon-processing-v2-ring-text {
+    position: absolute; inset: 0;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    pointer-events: none;
+    gap: 2px;
+  }
+  .ps-tryon-processing-v2-pct {
+    font-size: 22px; font-weight: 700;
+    color: var(--ps-accent);
+    font-variant-numeric: tabular-nums;
+  }
+  .ps-tryon-processing-v2-status {
+    font-size: 9px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+    text-align: center;
+    max-width: 95px; line-height: 1.2;
+  }
+
+  .ps-tryon-processing-v2-bar-hidden {
+    display: none;
+  }
+
+  .ps-tryon-processing-v2-sep {
+    height: 1px; width: 100%;
+    background: var(--ps-border-subtle, rgba(0,0,0,0.06));
+    margin: 0.4vw 0 0;
+  }
+
+  .ps-tryon-processing-v2-section-label {
+    font-size: 0.6vw; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+    margin-bottom: 0.5vw;
+  }
+  .ps-tryon-processing-v2-cards {
+    display: flex; flex-direction: column; gap: 0.5vw;
+  }
+  .ps-tryon-processing-v2-card {
+    display: flex; align-items: flex-start; gap: 0.6vw;
+    padding: 0.7vw 0.8vw;
+    background: var(--ps-bg-secondary, #f9fafb);
+    border: 1px solid var(--ps-border-subtle, rgba(0,0,0,0.06));
+    border-radius: 0.55vw;
+  }
+  .ps-tryon-processing-v2-card-icon {
+    width: 1.7vw; height: 1.7vw;
+    min-width: 28px; min-height: 28px;
+    display: flex; align-items: center; justify-content: center;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .ps-tryon-processing-v2-card-icon.ps-style    { background: rgba(33, 84, 239, 0.10); color: var(--ps-accent); }
+  .ps-tryon-processing-v2-card-icon.ps-spotlight { background: rgba(168, 85, 247, 0.10); color: #9333ea; }
+  .ps-tryon-processing-v2-card-icon.ps-fact     { background: rgba(16, 185, 129, 0.10); color: #059669; }
+  .ps-tryon-processing-v2-card-text {
+    flex: 1; min-width: 0;
+  }
+  .ps-tryon-processing-v2-card-head {
+    font-size: 0.7vw; font-weight: 700;
+    color: var(--ps-text-primary);
+    margin-bottom: 2px;
+  }
+  .ps-tryon-processing-v2-card-body {
+    font-size: 0.65vw; line-height: 1.5;
+    color: var(--ps-text-secondary);
+    animation: ps-fade-in 0.4s ease;
+  }
+  @keyframes ps-fade-in {
+    from { opacity: 0; transform: translateY(2px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  .ps-tryon-processing-v2-cancel {
+    margin-top: auto;
+    background: transparent; border: none;
+    color: var(--ps-text-muted);
+    font-family: inherit;
+    font-size: 0.68vw; font-weight: 600;
+    cursor: pointer;
+    padding: 0.3vw 0;
+    text-align: center;
+    width: 100%;
+    transition: color 0.15s;
+  }
+  .ps-tryon-processing-v2-cancel:hover { color: var(--ps-text-primary); }
+
   /* Result — split layout */
   .ps-tryon-result-split {
     display: flex; gap: 1.5vw; text-align: left; align-items: flex-start;
@@ -13208,6 +13386,42 @@ const STYLES$1 = `
      px-based sizing (vw becomes sub-pixel and unreadable on phones)
      ════════════════════════════════════════════════════════════════ */
   @media (max-width: 768px) {
+    /* ProcessingView v2 mobile — stack: image on top (max 38vh), then
+     * the progress + cards panel below. */
+    .ps-tryon-processing-v2 {
+      flex-direction: column !important;
+      gap: 12px !important;
+      padding: 12px !important;
+      height: auto !important;
+    }
+    .ps-tryon-processing-v2-image {
+      flex: 0 0 auto !important;
+      width: 100% !important;
+      height: 38vh !important; min-height: 280px !important;
+      border-radius: 12px !important;
+    }
+    .ps-tryon-processing-v2-badge {
+      top: 10px !important; left: 10px !important;
+      padding: 5px 10px !important; gap: 6px !important;
+      font-size: 10px !important;
+    }
+    .ps-tryon-processing-v2-panel {
+      gap: 12px !important; padding: 4px 6px !important;
+    }
+    .ps-tryon-processing-v2-title { font-size: 17px !important; }
+    .ps-tryon-processing-v2-sub { font-size: 12px !important; margin-top: 4px !important; }
+    .ps-tryon-processing-v2-ring-wrap { width: 96px !important; height: 96px !important; }
+    .ps-tryon-processing-v2-ring-wrap svg { width: 96px !important; height: 96px !important; }
+    .ps-tryon-processing-v2-pct { font-size: 18px !important; }
+    .ps-tryon-processing-v2-status { font-size: 8px !important; max-width: 75px !important; }
+    .ps-tryon-processing-v2-section-label { font-size: 10px !important; margin-bottom: 8px !important; }
+    .ps-tryon-processing-v2-cards { gap: 8px !important; }
+    .ps-tryon-processing-v2-card { padding: 10px 12px !important; gap: 10px !important; border-radius: 10px !important; }
+    .ps-tryon-processing-v2-card-icon { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; }
+    .ps-tryon-processing-v2-card-head { font-size: 12px !important; }
+    .ps-tryon-processing-v2-card-body { font-size: 11px !important; }
+    .ps-tryon-processing-v2-cancel { font-size: 12px !important; padding: 8px 0 !important; }
+
     /* NoChartView mobile — stack image on top, panel below. */
     .ps-tryon-no-chart {
       flex-direction: column !important;
@@ -15010,18 +15224,22 @@ const STYLES$1 = `
     transition: background 0.15s, transform 0.15s;
   }
   .ps-msr-section-card:active { transform: scale(0.99); background: var(--ps-bg-secondary); }
+  /* Bigger garment icon — same source as desktop (sizeGuide.sectionImages
+   * → falls back to built-in line-art PNG via garmentIconForSection).
+   * No background, no tinting — exact image asset shown at scale. */
+  .ps-msr-section-icon-lg {
+    width: 56px; height: 56px;
+    object-fit: contain;
+    background: none;
+    margin: 0 auto 4px;
+    display: block;
+  }
   .ps-msr-section-name {
-    display: inline-flex; align-items: center; gap: 6px;
     font-size: 11px; font-weight: 600;
     letter-spacing: 0.12em; text-transform: uppercase;
     color: var(--ps-text-muted);
     text-align: center;
   }
-  .ps-msr-section-icon {
-    width: 18px; height: 18px;
-    object-fit: contain;
-    opacity: 0.85;
-  }
   .ps-msr-section-size {
     font-size: 32px; font-weight: 600;
     color: var(--ps-text-primary);
@@ -18851,10 +19069,8 @@ function MultiSectionMobile({
             className: `ps-msr-section-card${isOverridden ? " ps-overridden" : ""}`,
             onClick: () => onSelectSection(name),
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msr-section-name", children: [
-                iconSrc && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconSrc, alt: "", className: "ps-msr-section-icon" }),
-                cleanName.toUpperCase()
-              ] }),
+              iconSrc && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconSrc, alt: "", className: "ps-msr-section-icon-lg" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msr-section-name", children: cleanName.toUpperCase() }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msr-section-size", children: sizeValue }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "span",
@@ -21714,7 +21930,7 @@ function UploadView({
     }
   ) });
 }
-const RING_RADIUS = 27;
+const RING_RADIUS = 38;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function ProcessingView({
   previewUrl,
@@ -21724,6 +21940,10 @@ function ProcessingView({
   progressStatusRef,
   progressEtaRef,
   progressRingRef,
+  productTitle,
+  productMaterial,
+  productDescription,
+  onCancel,
   cn,
   t: t2
 }) {
@@ -21748,33 +21968,56 @@ function ProcessingView({
       el2.style.strokeDashoffset = String(offset);
     }
   }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
+  const aiFacts = [
+    t2("Our model is analyzing 150+ body landmarks for the perfect fit"),
+    t2("Calibrating fabric drape against your body proportions"),
+    t2("Cross-checking fit against millions of garment patterns"),
+    t2("Rendering shadows and highlights to match your photo's lighting")
+  ];
+  const styleTip = (() => {
+    const t1 = t2("Pair this with neutral tones for a balanced look");
+    const t22 = t2("Layer with a fitted base for sharper silhouette");
+    const t3 = t2("Cuff once for a relaxed everyday feel");
+    return [t1, t22, t3];
+  })();
+  const [factIdx, setFactIdx] = reactExports.useState(0);
+  const [tipIdx, setTipIdx] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    const f2 = setInterval(() => setFactIdx((i) => (i + 1) % aiFacts.length), 4e3);
+    const s = setInterval(() => setTipIdx((i) => (i + 1) % styleTip.length), 5e3);
+    return () => {
+      clearInterval(f2);
+      clearInterval(s);
+    };
+  }, []);
+  const garmentLine = productMaterial?.trim() || (productDescription?.trim() ? productDescription.trim().slice(0, 90) + (productDescription.trim().length > 90 ? "…" : "") : null) || t2("Crafted with quality materials for everyday comfort");
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-image", children: [
       previewUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-blur", style: { backgroundImage: `url(${previewUrl})` } }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: previewUrl, alt: t2("Your photo"), className: "ps-tryon-processing-model" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-line" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-overlay" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-overlay" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-badge", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-processing-v2-badge-dot", "aria-hidden": "true" }),
+        t2("ANALYZING BODY MAP")
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-section", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-progress-ring", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 64 64", width: "64", height: "64", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "circle",
-            {
-              cx: "32",
-              cy: "32",
-              r: RING_RADIUS,
-              className: "ps-tryon-progress-ring-track"
-            }
-          ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-panel", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-head", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "ps-tryon-processing-v2-title", children: t2("Generating Your Look") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-tryon-processing-v2-sub", children: t2("Our AI is precisely mapping the garment to your unique proportions.") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-ring-wrap", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 96 96", width: "120", height: "120", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "48", cy: "48", r: RING_RADIUS, className: "ps-tryon-progress-ring-track" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "circle",
             {
               ref: ringCb,
-              cx: "32",
-              cy: "32",
+              cx: "48",
+              cy: "48",
               r: RING_RADIUS,
               className: "ps-tryon-progress-ring-fill",
               strokeDasharray: RING_CIRCUMFERENCE,
@@ -21782,13 +22025,48 @@ function ProcessingView({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaCb, className: "ps-tryon-progress-eta", children: `~22s` })
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-ring-text", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctCb, className: "ps-tryon-processing-v2-pct", children: "0%" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: statusCb, className: "ps-tryon-processing-v2-status", children: t2("Preparing your image…") })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: t2("Preparing your image...") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: t2("This usually takes 15-25 seconds") })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-bar-hidden", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: barCb }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaCb })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-sep" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-section", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-section-label", children: t2("WHILE YOU WAIT") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-cards", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-icon ps-style", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c1 .9 1 1.8 1 2.3v1h6v-1c0-.5 0-1.4 1-2.3A7 7 0 0 0 12 2z" }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card-text", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-head", children: t2("Style Tip") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: styleTip[tipIdx] }, tipIdx)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-icon ps-spotlight", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card-text", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-head", children: t2("Garment Spotlight") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: garmentLine })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-icon ps-fact", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2v6M12 16v6M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M16 12h6M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24" }) }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card-text", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-head", children: t2("AI Fact") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: aiFacts[factIdx] }, factIdx)
+            ] })
+          ] })
+        ] })
+      ] }),
+      onCancel && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-tryon-processing-v2-cancel", onClick: onCancel, children: t2("Cancel Generation") })
+    ] })
   ] });
 }
 function ErrorView({
@@ -27067,7 +27345,7 @@ function PrimeStyleTryonInner({
         { at: 75, text: t2("Refining details...") },
         { at: 90, text: t2("Almost there...") }
       ];
-      const RING_CIRCUMFERENCE2 = 2 * Math.PI * 27;
+      const RING_CIRCUMFERENCE2 = 2 * Math.PI * 38;
       progressIntervalRef.current = setInterval(() => {
         if (completedRef.current) return;
         const startTs = progressStartTsRef.current || Date.now();
@@ -28750,6 +29028,13 @@ function PrimeStyleTryonInner({
             progressStatusRef,
             progressEtaRef,
             progressRingRef,
+            productTitle,
+            productMaterial,
+            productDescription,
+            onCancel: () => {
+              setView("size-result");
+              setTryOnProcessing(false);
+            },
             cn,
             t: t2
           }

package/package.json

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