@primestyleai/tryon 5.8.58 → 5.9.0

package/dist/api-client.d.ts

@@ -4,7 +4,7 @@ export declare class ApiClient {
     private baseUrl;
     constructor(apiKey: string, apiUrl?: string);
     private get headers();
-    submitTryOn(modelImage: string, garmentImage: string, fitInfo?: FitAreaInfo[]): Promise<TryOnResponse>;
+    submitTryOn(modelImage: string, garmentImage: string, fitInfo?: FitAreaInfo[], category?: "apparel" | "hat" | "sunglasses"): Promise<TryOnResponse>;
     getStatus(jobId: string): Promise<TryOnStatus>;
     getStreamUrl(): string;
 }

package/dist/{index-J6U0-q_3.js → index-CuIieeOy.js}

@@ -10,9 +10,10 @@ class ApiClient {
       Authorization: `Bearer ${this.apiKey}`
     };
   }
-  async submitTryOn(modelImage, garmentImage, fitInfo) {
+  async submitTryOn(modelImage, garmentImage, fitInfo, category) {
     const body = { modelImage, garmentImage };
     if (fitInfo && fitInfo.length > 0) body.fitInfo = fitInfo;
+    if (category && category !== "apparel") body.category = category;
     const res = await fetch(`${this.baseUrl}/api/v1/tryon`, {
       method: "POST",
       headers: this.headers,

package/dist/primestyle-tryon.js

@@ -1,5 +1,5 @@
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-J6U0-q_3.js";
-import { P, b, T, d, r } from "./index-J6U0-q_3.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-CuIieeOy.js";
+import { P, b, T, d, r } from "./index-CuIieeOy.js";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'

package/dist/react/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES, a as compressImage, c as createT, A as ApiClient, S as SseClient, i as isValidImageFile } from "../index-J6U0-q_3.js";
+import { P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES, a as compressImage, c as createT, A as ApiClient, S as SseClient, i as isValidImageFile } from "../index-CuIieeOy.js";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { createPortal } from "react-dom";
@@ -2084,22 +2084,61 @@ const STYLES = `
   }
 
   .ps-tryon-progress-section {
-    display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 15.6vw; margin-bottom: 0.83vw;
+    display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 18vw; margin-bottom: 0.83vw;
   }
   .ps-tryon-progress-bar-wrap {
     flex: 1; height: 0.31vw; background: var(--ps-border-color); border-radius: 3px; overflow: hidden;
+    position: relative;
+  }
+  .ps-tryon-progress-bar-wrap::after {
+    content: ""; position: absolute; inset: 0;
+    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
+    transform: translateX(-100%);
+    animation: ps-progress-shimmer 2s linear infinite;
+    pointer-events: none;
+  }
+  @keyframes ps-progress-shimmer {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
   }
   .ps-tryon-progress-bar-fill {
     height: 100%; background: linear-gradient(90deg, var(--ps-accent), var(--ps-accent-light));
     border-radius: 3px; transition: width 0.3s ease; width: 0%;
+    position: relative; z-index: 1;
   }
   .ps-tryon-progress-pct {
     font-size: 0.68vw; font-weight: 700; color: var(--ps-accent); min-width: 1.88vw; text-align: right;
     font-variant-numeric: tabular-nums;
   }
 
+  /* Circular ETA ring — 48×48 px SVG with a track + progress circle; ETA
+     text centered. strokeDashoffset is driven by the ticker in
+     PrimeStyleTryonInner, so CSS only styles the appearance. */
+  .ps-tryon-progress-ring {
+    position: relative; width: 48px; height: 48px; flex: 0 0 48px;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-tryon-progress-ring svg { transform: rotate(-90deg); }
+  .ps-tryon-progress-ring-track {
+    fill: none; stroke: var(--ps-border-color); stroke-width: 3.5;
+  }
+  .ps-tryon-progress-ring-fill {
+    fill: none; stroke: var(--ps-accent); stroke-width: 3.5;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.3s ease;
+  }
+  .ps-tryon-progress-eta {
+    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+    font-size: 10px; font-weight: 700; color: var(--ps-accent);
+    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
+    pointer-events: none;
+  }
+
   @keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
-  .ps-tryon-processing-text { font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw; }
+  .ps-tryon-processing-text {
+    font-size: 0.73vw; color: var(--ps-text-primary); margin: 0 0 0.21vw;
+    opacity: 1; transition: opacity 0.18s ease;
+  }
   .ps-tryon-processing-sub { font-size: 0.63vw; color: var(--ps-text-secondary); margin: 0; }
 
   /* Result — split layout */
@@ -8950,6 +8989,7 @@ function SizeResultView({
   const allDone = hasPhoto ? sizingDone && tryOnDone : sizingDone;
   const isMobile = useIsMobile();
   const isAccessory = measurementType === "face" || measurementType === "head";
+  const vtoExcluded = measurementType === "foot";
   console.log("[PS-SDK] SizeResultView render:", {
     hasPhoto,
     isSnapProcessing,
@@ -9223,7 +9263,7 @@ function SizeResultView({
                     " →"
                   ]
                 }
-              ) : isAccessory ? /* @__PURE__ */ jsxs(
+              ) : vtoExcluded ? /* @__PURE__ */ jsxs(
                 "button",
                 {
                   className: "ps-tryon-v2-cta",
@@ -9283,7 +9323,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
                 productImage: resultImageUrl || productImage,
@@ -9330,7 +9370,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
                 t,
@@ -9340,14 +9380,14 @@ function SizeResultView({
           ] });
         })()
       ),
-      showPhotoGuide && !isAccessory && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
+      showPhotoGuide && !vtoExcluded && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
         /* ── Mobile: same layout as the AI-sizing photo step
            (PhotoStepMobile) — title + subtitle, large preview,
            checklist card, primary CTA + RETAKE secondary. ── */
         /* @__PURE__ */ jsx("div", { className: "ps-bp-wrapper", style: { padding: "16px 16px 0", background: "var(--ps-bg-primary)" }, children: /* @__PURE__ */ jsxs("div", { className: "ps-pm-root", children: [
           /* @__PURE__ */ jsxs("div", { className: "ps-pm-header", children: [
             /* @__PURE__ */ jsx("h2", { className: "ps-pm-title", children: t("Review your photo") }),
-            /* @__PURE__ */ jsx("p", { className: "ps-pm-subtitle", children: t("Ensure your full body is visible for the most accurate virtual try-on.") })
+            /* @__PURE__ */ jsx("p", { className: "ps-pm-subtitle", children: measurementType === "face" ? t("A clear, front-facing face photo — no glasses on — gives us the most accurate try-on.") : measurementType === "head" ? t("Face the camera with your head and shoulders in frame, leaving space above your head.") : t("Ensure your full body is visible for the most accurate virtual try-on.") })
           ] }),
           /* @__PURE__ */ jsx(
             "input",
@@ -9398,11 +9438,19 @@ function SizeResultView({
             /* @__PURE__ */ jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }) }),
             /* @__PURE__ */ jsxs("div", { className: "ps-pm-checklist-body", children: [
               /* @__PURE__ */ jsx("div", { className: "ps-pm-checklist-title", children: t("Checklist for accuracy") }),
-              /* @__PURE__ */ jsxs("ul", { className: "ps-pm-checklist-items", children: [
+              /* @__PURE__ */ jsx("ul", { className: "ps-pm-checklist-items", children: measurementType === "face" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("li", { children: t("Face the camera directly at eye level") }),
+                /* @__PURE__ */ jsx("li", { children: t("Remove any glasses you're wearing") }),
+                /* @__PURE__ */ jsx("li", { children: t("Good lighting, plain background") })
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("li", { children: t("Head and shoulders in frame") }),
+                /* @__PURE__ */ jsx("li", { children: t("Leave space above your head") }),
+                /* @__PURE__ */ jsx("li", { children: t("Good lighting, plain background") })
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("li", { children: t("Form-fitting clothing is recommended") }),
                 /* @__PURE__ */ jsx("li", { children: t("Standing 2-3 meters from camera") }),
                 /* @__PURE__ */ jsx("li", { children: t("Neutral background with good lighting") })
-              ] })
+              ] }) })
             ] })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
@@ -9482,7 +9530,7 @@ function SizeResultView({
                 ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(UploadIcon, { size: 32 }),
                   /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t("Upload your photo") }),
-                  /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t("Click or drag a full-body photo") })
+                  /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: measurementType === "face" ? t("Click or drag a close-up face photo") : measurementType === "head" ? t("Click or drag a head-and-shoulders photo") : t("Click or drag a full-body photo") })
                 ] }),
                 /* @__PURE__ */ jsx(
                   "input",
@@ -9507,7 +9555,23 @@ function SizeResultView({
                 /* @__PURE__ */ jsx("span", { style: { color: "#1c9d4c", fontSize: "0.75vw", fontWeight: 700 }, children: "✓" }),
                 /* @__PURE__ */ jsx("span", { style: { color: "#1c9d4c", fontSize: "0.65vw", fontWeight: 600 }, children: t("Do") })
               ] }),
-              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                t("Face the camera directly, centered in frame"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Use natural, even lighting (e.g. near a window)"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Keep hair away from your face and ears"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Choose a plain, light background")
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                t("Face the camera with head and shoulders in frame"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Leave some space above your head"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Use natural, even lighting"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Choose a plain, light background")
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 t("Stand facing the camera with your full body in frame"),
                 /* @__PURE__ */ jsx("br", {}),
                 t("Use natural or even lighting"),
@@ -9515,14 +9579,30 @@ function SizeResultView({
                 t("Wear fitted, simple clothing"),
                 /* @__PURE__ */ jsx("br", {}),
                 t("Stand straight and still, arms relaxed")
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { style: { background: "#ffe2e2", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
                 /* @__PURE__ */ jsx("span", { style: { color: "#e7000b", fontSize: "0.75vw", fontWeight: 700 }, children: "✗" }),
                 /* @__PURE__ */ jsx("span", { style: { color: "#e7000b", fontSize: "0.65vw", fontWeight: 600 }, children: t("Don't") })
               ] }),
-              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                t("Don't wear sunglasses or a hat in the photo"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Don't tilt or turn your head"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Don't use strong backlighting or flash"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Don't apply filters or edits")
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                t("Don't wear a hat in the photo"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Don't crop out the top of your head"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Don't use strong backlighting or flash"),
+                /* @__PURE__ */ jsx("br", {}),
+                t("Don't apply filters or edits")
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 t("Don't wear loose or baggy clothing"),
                 /* @__PURE__ */ jsx("br", {}),
                 t("Don't sit, pose, or bend"),
@@ -9530,14 +9610,14 @@ function SizeResultView({
                 t("Don't take mirror photos or selfies"),
                 /* @__PURE__ */ jsx("br", {}),
                 t("Don't apply filters or edits")
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { style: { background: "rgba(59,130,246,0.08)", border: "1px solid rgba(59,130,246,0.2)", borderRadius: "0.5vw", padding: "0.5vw 0.8vw" }, children: [
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.2vw" }, children: [
                 /* @__PURE__ */ jsx(SparkleIcon, { size: 12 }),
                 /* @__PURE__ */ jsx("span", { style: { color: "var(--ps-accent)", fontSize: "0.65vw", fontWeight: 700 }, children: t("Pro Tip") })
               ] }),
-              /* @__PURE__ */ jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: t("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: measurementType === "face" ? t("A clear, well-lit face photo gives the most accurate eyewear try-on.") : measurementType === "head" ? t("A clear head-and-shoulders photo with space above your head gives the most accurate headwear try-on.") : t("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
             ] })
           ] })
         ] }),
@@ -9666,12 +9746,16 @@ function UploadView({
     }
   ) });
 }
+const RING_RADIUS = 20;
+const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function ProcessingView({
   previewUrl,
   progressRef,
   progressBarRef,
   progressTextRef,
   progressStatusRef,
+  progressEtaRef,
+  progressRingRef,
   cn,
   t
 }) {
@@ -9686,6 +9770,16 @@ function ProcessingView({
   const statusCb = useCallback((el) => {
     progressStatusRef.current = el;
   }, []);
+  const etaCb = useCallback((el) => {
+    progressEtaRef.current = el;
+  }, []);
+  const ringCb = useCallback((el) => {
+    progressRingRef.current = el;
+    if (el) {
+      const offset = RING_CIRCUMFERENCE * (1 - Math.round(progressRef.current) / 100);
+      el.style.strokeDashoffset = String(offset);
+    }
+  }, []);
   return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
       previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -9696,6 +9790,32 @@ function ProcessingView({
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-ring", children: [
+        /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 48 48", width: "48", height: "48", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: RING_RADIUS,
+              className: "ps-tryon-progress-ring-track"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              ref: ringCb,
+              cx: "24",
+              cy: "24",
+              r: RING_RADIUS,
+              className: "ps-tryon-progress-ring-fill",
+              strokeDasharray: RING_CIRCUMFERENCE,
+              strokeDashoffset: RING_CIRCUMFERENCE
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { ref: etaCb, className: "ps-tryon-progress-eta", children: `~22s` })
+      ] }),
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
       /* @__PURE__ */ jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
     ] }),
@@ -11361,12 +11481,13 @@ function PhotoStepMobile({
   photoVariant = "full-body",
   photoStepHeight,
   onPhotoStepHeightChange,
+  ageConfirmed,
+  onAgeConfirmedChange,
   t
 }) {
   const isCloseUp = photoVariant === "close-up";
   const fileRef = useRef(null);
   const hasPhoto = !!photoPreview;
-  const [ageConfirmed, setAgeConfirmed] = useState(null);
   const gated = !hasPhoto && ageConfirmed !== true;
   return /* @__PURE__ */ jsxs("div", { className: "ps-pm-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-pm-header", children: [
@@ -11418,14 +11539,14 @@ function PhotoStepMobile({
         /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate-eyebrow", children: t("AGE VERIFICATION") }),
         /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate-question", children: t("Is the person in this photo 18 years or older?") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-pm-age-gate-actions", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => setAgeConfirmed(true), children: t("Yes") }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t("No") })
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => onAgeConfirmedChange(true), children: t("Yes") }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => onAgeConfirmedChange(false), children: t("No") })
         ] })
       ] }) }),
       ageConfirmed === false && /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate", role: "alert", children: /* @__PURE__ */ jsxs("div", { className: "ps-pm-age-gate-card", children: [
         /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate-eyebrow ps-pm-age-gate-eyebrow-blocked", children: t("UPLOAD NOT ALLOWED") }),
         /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate-question", children: t("For your safety, we cannot process photos of people under 18.") }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(null), children: t("Go back") })
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => onAgeConfirmedChange(null), children: t("Go back") })
       ] }) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "ps-pm-legal-notice", children: [
@@ -11893,6 +12014,11 @@ function BodyProfileView({
           error,
           photoStepHeight,
           onPhotoStepHeightChange: setPhotoStepHeight,
+          ageConfirmed,
+          onAgeConfirmedChange: (v) => {
+            setAgeConfirmed(v);
+            if (v === true) setError("");
+          },
           t
         }
       ) });
@@ -12639,6 +12765,11 @@ function AccessorySizeView({
         onSwitchToManual: () => setStep("manual"),
         error,
         photoVariant,
+        ageConfirmed,
+        onAgeConfirmedChange: (v) => {
+          setAgeConfirmed(v);
+          if (v === true) setError("");
+        },
         t
       }
     ) });
@@ -13196,6 +13327,12 @@ function detectMeasurementType(title) {
   if (/\b(sunglass|sunglasses|eyewear|eyeglasses|glasses|spectacles|optical|goggles|frames|aviator|wayfarer|lens)\b/.test(t)) return "face";
   return "body";
 }
+function measurementTypeToVtoCategory(type) {
+  if (type === "face") return "sunglasses";
+  if (type === "head") return "hat";
+  if (type === "body") return "apparel";
+  return null;
+}
 function PrimeStyleTryonInner({
   productImage,
   productTitle = "Product",
@@ -13301,15 +13438,22 @@ function PrimeStyleTryonInner({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  const TARGET_SECONDS = 22;
   const progressRef = useRef(0);
   const progressBarRef = useRef(null);
   const progressTextRef = useRef(null);
   const progressStatusRef = useRef(null);
+  const progressEtaRef = useRef(null);
+  const progressRingRef = useRef(null);
+  const progressStartTsRef = useRef(null);
+  const progressLastStageRef = useRef("");
   const progressIntervalRef = useRef(null);
   useEffect(() => {
     if (view === "processing") {
       if (progressIntervalRef.current) return;
       progressRef.current = 0;
+      progressStartTsRef.current = Date.now();
+      progressLastStageRef.current = "";
       const statuses = [
         { at: 0, text: t("Preparing your image...") },
         { at: 15, text: t("Analyzing body proportions...") },
@@ -13318,17 +13462,35 @@ function PrimeStyleTryonInner({
         { at: 75, text: t("Refining details...") },
         { at: 90, text: t("Almost there...") }
       ];
+      const RING_CIRCUMFERENCE2 = 2 * Math.PI * 20;
       progressIntervalRef.current = setInterval(() => {
-        const p = progressRef.current;
-        if (p >= 100) return;
-        const increment = p < 30 ? 1.2 : p < 60 ? 0.8 : p < 80 ? 0.4 : p < 95 ? 0.15 : 0;
-        progressRef.current = Math.min(p + increment, 95);
-        const val = Math.round(progressRef.current);
+        if (completedRef.current) return;
+        const startTs = progressStartTsRef.current || Date.now();
+        const elapsed = (Date.now() - startTs) / 1e3;
+        const target = Math.min(95, elapsed / TARGET_SECONDS * 100);
+        progressRef.current = target;
+        const val = Math.round(target);
         if (progressBarRef.current) progressBarRef.current.style.width = `${val}%`;
         if (progressTextRef.current) progressTextRef.current.textContent = `${val}%`;
+        if (progressRingRef.current) {
+          const offset = RING_CIRCUMFERENCE2 * (1 - target / 100);
+          progressRingRef.current.style.strokeDashoffset = String(offset);
+        }
+        if (progressEtaRef.current) {
+          const remaining = Math.max(0, TARGET_SECONDS - Math.floor(elapsed));
+          progressEtaRef.current.textContent = elapsed >= TARGET_SECONDS ? t("Finalizing...") : `~${remaining}s`;
+        }
         if (progressStatusRef.current) {
           const status = [...statuses].reverse().find((s) => val >= s.at);
-          if (status) progressStatusRef.current.textContent = status.text;
+          if (status && status.text !== progressLastStageRef.current) {
+            const el = progressStatusRef.current;
+            el.style.opacity = "0";
+            setTimeout(() => {
+              el.textContent = status.text;
+              el.style.opacity = "1";
+            }, 180);
+            progressLastStageRef.current = status.text;
+          }
         }
       }, 200);
       return () => {
@@ -13340,8 +13502,9 @@ function PrimeStyleTryonInner({
         clearInterval(progressIntervalRef.current);
         progressIntervalRef.current = null;
       }
+      progressStartTsRef.current = null;
     }
-  }, [view]);
+  }, [view, t]);
   useEffect(() => {
     return () => {
       if (previewUrl) URL.revokeObjectURL(previewUrl);
@@ -13668,7 +13831,16 @@ function PrimeStyleTryonInner({
         progressRef.current = 100;
         if (progressBarRef.current) progressBarRef.current.style.width = "100%";
         if (progressTextRef.current) progressTextRef.current.textContent = "100%";
-        if (progressStatusRef.current) progressStatusRef.current.textContent = t("Complete!");
+        if (progressRingRef.current) progressRingRef.current.style.strokeDashoffset = "0";
+        if (progressEtaRef.current) progressEtaRef.current.textContent = t("Done");
+        if (progressStatusRef.current) {
+          const el = progressStatusRef.current;
+          el.style.opacity = "0";
+          setTimeout(() => {
+            el.textContent = t("Complete!");
+            el.style.opacity = "1";
+          }, 180);
+        }
         cleanupJob();
         setTryOnProcessing(false);
         onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
@@ -14077,25 +14249,29 @@ function PrimeStyleTryonInner({
     }
     completedRef.current = false;
     setTryOnProcessing(true);
+    const vtoCategory = measurementTypeToVtoCategory(detectMeasurementType(productTitle));
+    const isApparel = vtoCategory === "apparel";
     const previewObjUrl = (overrideFile ? null : previewUrl) || URL.createObjectURL(file);
     if (overrideFile || !previewUrl) setPreviewUrl(previewObjUrl);
     modelPoseRef.current = null;
     setBodyLandmarks(null);
-    detectMeasurementLines(previewObjUrl).then((lines) => {
-      modelPoseRef.current = lines;
-    }).catch(() => {
-    });
-    detectBodyLandmarks(previewObjUrl).then((lm) => {
-      setBodyLandmarks(lm);
-    }).catch(() => {
-    });
+    if (isApparel) {
+      detectMeasurementLines(previewObjUrl).then((lines) => {
+        modelPoseRef.current = lines;
+      }).catch(() => {
+      });
+      detectBodyLandmarks(previewObjUrl).then((lm) => {
+        setBodyLandmarks(lm);
+      }).catch(() => {
+      });
+    }
     try {
       const modelImage = await compressImage(file);
       let fitInfo;
-      if (sizingResult?.matchDetails?.length) {
+      if (isApparel && sizingResult?.matchDetails?.length) {
         fitInfo = buildFitInfo(sizingResult.matchDetails, modelPoseRef.current);
       }
-      const response = await apiRef.current.submitTryOn(modelImage, productImage, fitInfo);
+      const response = await apiRef.current.submitTryOn(modelImage, productImage, fitInfo, vtoCategory ?? "apparel");
       onProcessing?.(response.jobId);
       unsubRef.current = sseRef.current.onJob(response.jobId, handleVtoUpdate);
       let attempts = 0;
@@ -14126,11 +14302,13 @@ function PrimeStyleTryonInner({
       setView("error");
       onError?.({ message, code });
     }
-  }, [selectedFile, productImage, sizingResult, onProcessing, onError, handleVtoUpdate]);
+  }, [selectedFile, productImage, productTitle, sizingResult, onProcessing, onError, handleVtoUpdate]);
   const handleRetryWithFit = useCallback(async (fitInfo) => {
     if (!selectedFile || !apiRef.current || !sseRef.current) return;
     setRetryLoading(true);
-    if (modelPoseRef.current) {
+    const vtoCategory = measurementTypeToVtoCategory(detectMeasurementType(productTitle));
+    const isApparel = vtoCategory === "apparel";
+    if (isApparel && modelPoseRef.current) {
       const AREA_MAP = {
         chest: "chest",
         bust: "chest",
@@ -14156,7 +14334,8 @@ function PrimeStyleTryonInner({
         pollingRef.current = null;
       }
       const modelImage = await compressImage(selectedFile);
-      const response = await apiRef.current.submitTryOn(modelImage, productImage, fitInfo);
+      const outboundFitInfo = isApparel ? fitInfo : void 0;
+      const response = await apiRef.current.submitTryOn(modelImage, productImage, outboundFitInfo, vtoCategory ?? "apparel");
       unsubRef.current = sseRef.current.onJob(response.jobId, (update) => {
         if (update.status === "completed" && update.imageUrl) {
           setResultImageUrl(update.imageUrl);
@@ -14221,7 +14400,7 @@ function PrimeStyleTryonInner({
     } catch {
       setRetryLoading(false);
     }
-  }, [selectedFile, productImage]);
+  }, [selectedFile, productImage, productTitle]);
   const handleDownload = useCallback(() => {
     if (!resultImageUrl) return;
     if (resultImageUrl.startsWith("data:")) {
@@ -14663,6 +14842,8 @@ function PrimeStyleTryonInner({
             progressBarRef,
             progressTextRef,
             progressStatusRef,
+            progressEtaRef,
+            progressRingRef,
             cn,
             t
           }