@primestyleai/tryon 5.8.57 → 5.9.0

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

@@ -9,7 +9,9 @@ interface PhotoStepMobileProps {
     photoVariant?: "full-body" | "close-up";
     photoStepHeight?: string;
     onPhotoStepHeightChange?: (v: string) => void;
+    ageConfirmed: boolean | null;
+    onAgeConfirmedChange: (v: boolean | null) => void;
     t: TranslateFn;
 }
-export declare function PhotoStepMobile({ photoPreview, handlePhotoSelect, handleRemovePhoto, onAnalyze, onSwitchToManual, error, photoVariant, photoStepHeight, onPhotoStepHeightChange, t, }: PhotoStepMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function PhotoStepMobile({ photoPreview, handlePhotoSelect, handleRemovePhoto, onAnalyze, onSwitchToManual, error, photoVariant, photoStepHeight, onPhotoStepHeightChange, ageConfirmed, onAgeConfirmedChange, t, }: PhotoStepMobileProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,13 @@
 import type { PrimeStyleClassNames } from "../../types";
 import type { TranslateFn } from "../../i18n";
-export declare function ProcessingView({ previewUrl, progressRef, progressBarRef, progressTextRef, progressStatusRef, cn, t, }: {
+export declare function ProcessingView({ previewUrl, progressRef, progressBarRef, progressTextRef, progressStatusRef, progressEtaRef, progressRingRef, cn, t, }: {
     previewUrl: string | null;
     progressRef: React.MutableRefObject<number>;
     progressBarRef: React.MutableRefObject<HTMLDivElement | null>;
     progressTextRef: React.MutableRefObject<HTMLSpanElement | null>;
     progressStatusRef: React.MutableRefObject<HTMLDivElement | null>;
+    progressEtaRef: React.MutableRefObject<HTMLSpanElement | null>;
+    progressRingRef: React.MutableRefObject<SVGCircleElement | null>;
     cn: PrimeStyleClassNames;
     t: TranslateFn;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/storefront/primestyle-tryon.js

@@ -9296,9 +9296,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,
@@ -11508,22 +11509,61 @@ const STYLES$1 = `
   }
 
   .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 */
@@ -18374,6 +18414,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,
@@ -18647,7 +18688,7 @@ function SizeResultView({
                     " →"
                   ]
                 }
-              ) : isAccessory ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              ) : vtoExcluded ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
                 "button",
                 {
                   className: "ps-tryon-v2-cta",
@@ -18707,7 +18748,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t2("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
                 productImage: resultImageUrl || productImage,
@@ -18754,7 +18795,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t2("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
                 t: t2,
@@ -18764,14 +18805,14 @@ function SizeResultView({
           ] });
         })()
       ),
-      showPhotoGuide && !isAccessory && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
+      showPhotoGuide && !vtoExcluded && /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-wrapper", style: { padding: "16px 16px 0", background: "var(--ps-bg-primary)" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-root", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-header", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-pm-title", children: t2("Review your photo") }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-pm-subtitle", children: t2("Ensure your full body is visible for the most accurate virtual try-on.") })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-pm-subtitle", children: measurementType === "face" ? t2("A clear, front-facing face photo — no glasses on — gives us the most accurate try-on.") : measurementType === "head" ? t2("Face the camera with your head and shoulders in frame, leaving space above your head.") : t2("Ensure your full body is visible for the most accurate virtual try-on.") })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "input",
@@ -18822,11 +18863,19 @@ function SizeResultView({
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-checklist-body", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-checklist-title", children: t2("Checklist for accuracy") }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "ps-pm-checklist-items", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "ps-pm-checklist-items", children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Face the camera directly at eye level") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Remove any glasses you're wearing") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Good lighting, plain background") })
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Head and shoulders in frame") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Leave space above your head") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Good lighting, plain background") })
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Form-fitting clothing is recommended") }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Standing 2-3 meters from camera") }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Neutral background with good lighting") })
-              ] })
+              ] }) })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" }),
@@ -18906,7 +18955,7 @@ function SizeResultView({
                 ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { size: 32 }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t2("Upload your photo") }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t2("Click or drag a full-body photo") })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: measurementType === "face" ? t2("Click or drag a close-up face photo") : measurementType === "head" ? t2("Click or drag a head-and-shoulders photo") : t2("Click or drag a full-body photo") })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(
                   "input",
@@ -18931,7 +18980,23 @@ function SizeResultView({
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#1c9d4c", fontSize: "0.75vw", fontWeight: 700 }, children: "✓" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#1c9d4c", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Do") })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Face the camera directly, centered in frame"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Use natural, even lighting (e.g. near a window)"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Keep hair away from your face and ears"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Choose a plain, light background")
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Face the camera with head and shoulders in frame"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Leave some space above your head"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Use natural, even lighting"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Choose a plain, light background")
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 t2("Stand facing the camera with your full body in frame"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Use natural or even lighting"),
@@ -18939,14 +19004,30 @@ function SizeResultView({
                 t2("Wear fitted, simple clothing"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Stand straight and still, arms relaxed")
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { background: "#ffe2e2", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#e7000b", fontSize: "0.75vw", fontWeight: 700 }, children: "✗" }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#e7000b", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Don't") })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Don't wear sunglasses or a hat in the photo"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't tilt or turn your head"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't use strong backlighting or flash"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't apply filters or edits")
+              ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                t2("Don't wear a hat in the photo"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't crop out the top of your head"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't use strong backlighting or flash"),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+                t2("Don't apply filters or edits")
+              ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 t2("Don't wear loose or baggy clothing"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Don't sit, pose, or bend"),
@@ -18954,14 +19035,14 @@ function SizeResultView({
                 t2("Don't take mirror photos or selfies"),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
                 t2("Don't apply filters or edits")
-              ] })
+              ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.2vw" }, children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(SparkleIcon, { size: 12 }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--ps-accent)", fontSize: "0.65vw", fontWeight: 700 }, children: t2("Pro Tip") })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: t2("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: measurementType === "face" ? t2("A clear, well-lit face photo gives the most accurate eyewear try-on.") : measurementType === "head" ? t2("A clear head-and-shoulders photo with space above your head gives the most accurate headwear try-on.") : t2("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
             ] })
           ] })
         ] }),
@@ -19090,12 +19171,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: t2
 }) {
@@ -19110,6 +19195,16 @@ function ProcessingView({
   const statusCb = reactExports.useCallback((el2) => {
     progressStatusRef.current = el2;
   }, []);
+  const etaCb = reactExports.useCallback((el2) => {
+    progressEtaRef.current = el2;
+  }, []);
+  const ringCb = reactExports.useCallback((el2) => {
+    progressRingRef.current = el2;
+    if (el2) {
+      const offset = RING_CIRCUMFERENCE * (1 - Math.round(progressRef.current) / 100);
+      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: [
       previewUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -19120,6 +19215,32 @@ function ProcessingView({
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-scan-overlay" })
     ] }),
     /* @__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 48 48", width: "48", height: "48", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "circle",
+            {
+              cx: "24",
+              cy: "24",
+              r: RING_RADIUS,
+              className: "ps-tryon-progress-ring-track"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "circle",
+            {
+              ref: ringCb,
+              cx: "24",
+              cy: "24",
+              r: RING_RADIUS,
+              className: "ps-tryon-progress-ring-fill",
+              strokeDasharray: RING_CIRCUMFERENCE,
+              strokeDashoffset: RING_CIRCUMFERENCE
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { ref: etaCb, className: "ps-tryon-progress-eta", children: `~22s` })
+      ] }),
       /* @__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%" })
     ] }),
@@ -20785,12 +20906,13 @@ function PhotoStepMobile({
   photoVariant = "full-body",
   photoStepHeight,
   onPhotoStepHeightChange,
+  ageConfirmed,
+  onAgeConfirmedChange,
   t: t2
 }) {
   const isCloseUp = photoVariant === "close-up";
   const fileRef = reactExports.useRef(null);
   const hasPhoto = !!photoPreview;
-  const [ageConfirmed, setAgeConfirmed] = reactExports.useState(null);
   const gated = !hasPhoto && ageConfirmed !== true;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-root", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-header", children: [
@@ -20842,14 +20964,14 @@ function PhotoStepMobile({
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-eyebrow", children: t2("AGE VERIFICATION") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-question", children: t2("Is the person in this photo 18 years or older?") }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-age-gate-actions", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => setAgeConfirmed(true), children: t2("Yes") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t2("No") })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-primary", onClick: () => onAgeConfirmedChange(true), children: t2("Yes") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => onAgeConfirmedChange(false), children: t2("No") })
         ] })
       ] }) }),
       ageConfirmed === false && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate", role: "alert", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-age-gate-card", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-eyebrow ps-pm-age-gate-eyebrow-blocked", children: t2("UPLOAD NOT ALLOWED") }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate-question", children: t2("For your safety, we cannot process photos of people under 18.") }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(null), children: t2("Go back") })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => onAgeConfirmedChange(null), children: t2("Go back") })
       ] }) })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-legal-notice", children: [
@@ -21317,6 +21439,11 @@ function BodyProfileView({
           error,
           photoStepHeight,
           onPhotoStepHeightChange: setPhotoStepHeight,
+          ageConfirmed,
+          onAgeConfirmedChange: (v2) => {
+            setAgeConfirmed(v2);
+            if (v2 === true) setError("");
+          },
           t: t2
         }
       ) });
@@ -22063,6 +22190,11 @@ function AccessorySizeView({
         onSwitchToManual: () => setStep("manual"),
         error,
         photoVariant,
+        ageConfirmed,
+        onAgeConfirmedChange: (v2) => {
+          setAgeConfirmed(v2);
+          if (v2 === true) setError("");
+        },
         t: t2
       }
     ) });
@@ -22473,13 +22605,26 @@ function buildFieldsFromSizeGuide$2(sizeGuide) {
   const req = sizeGuide?.requiredFields;
   if (!req || req.length === 0) return FALLBACK_FOOT_FIELDS;
   const SIZE_CODE_KEYS = /* @__PURE__ */ new Set(["size", "country", "eu", "__skip__", "shoeEU", "shoeUS", "shoeUK", "shoeJP"]);
-  const out = req.filter((f2) => !SIZE_CODE_KEYS.has(f2.key) && f2.unit !== "size").map((f2) => ({
-    key: f2.key,
-    label: f2.label || f2.key,
-    placeholder: { cm: f2.placeholder || "", in: f2.placeholder || "" },
-    min: 0,
-    step: 0.5
-  }));
+  const defaultPlaceholderFor = (key, label) => {
+    const exact = FALLBACK_FOOT_FIELDS.find((f2) => f2.key === key);
+    if (exact) return exact.placeholder;
+    const looksLikeFoot = /foot|length/i.test(key) || /foot|length/i.test(label);
+    if (looksLikeFoot) return FALLBACK_FOOT_FIELDS[0].placeholder;
+    return { cm: "", in: "" };
+  };
+  const out = req.filter((f2) => !SIZE_CODE_KEYS.has(f2.key) && f2.unit !== "size").map((f2) => {
+    const fallback = defaultPlaceholderFor(f2.key, f2.label || "");
+    return {
+      key: f2.key,
+      label: f2.label || f2.key,
+      placeholder: {
+        cm: f2.placeholder || fallback.cm,
+        in: f2.placeholder || fallback.in
+      },
+      min: 0,
+      step: 0.5
+    };
+  });
   return out.length > 0 ? out : FALLBACK_FOOT_FIELDS;
 }
 function FootSizeView(props) {
@@ -22607,6 +22752,12 @@ function detectMeasurementType(title) {
   if (/\b(sunglass|sunglasses|eyewear|eyeglasses|glasses|spectacles|optical|goggles|frames|aviator|wayfarer|lens)\b/.test(t2)) 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",
@@ -22712,15 +22863,22 @@ function PrimeStyleTryonInner({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  const TARGET_SECONDS = 22;
   const progressRef = reactExports.useRef(0);
   const progressBarRef = reactExports.useRef(null);
   const progressTextRef = reactExports.useRef(null);
   const progressStatusRef = reactExports.useRef(null);
+  const progressEtaRef = reactExports.useRef(null);
+  const progressRingRef = reactExports.useRef(null);
+  const progressStartTsRef = reactExports.useRef(null);
+  const progressLastStageRef = reactExports.useRef("");
   const progressIntervalRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (view === "processing") {
       if (progressIntervalRef.current) return;
       progressRef.current = 0;
+      progressStartTsRef.current = Date.now();
+      progressLastStageRef.current = "";
       const statuses = [
         { at: 0, text: t2("Preparing your image...") },
         { at: 15, text: t2("Analyzing body proportions...") },
@@ -22729,17 +22887,35 @@ function PrimeStyleTryonInner({
         { at: 75, text: t2("Refining details...") },
         { at: 90, text: t2("Almost there...") }
       ];
+      const RING_CIRCUMFERENCE2 = 2 * Math.PI * 20;
       progressIntervalRef.current = setInterval(() => {
-        const p2 = progressRef.current;
-        if (p2 >= 100) return;
-        const increment = p2 < 30 ? 1.2 : p2 < 60 ? 0.8 : p2 < 80 ? 0.4 : p2 < 95 ? 0.15 : 0;
-        progressRef.current = Math.min(p2 + 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 ? t2("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 el2 = progressStatusRef.current;
+            el2.style.opacity = "0";
+            setTimeout(() => {
+              el2.textContent = status.text;
+              el2.style.opacity = "1";
+            }, 180);
+            progressLastStageRef.current = status.text;
+          }
         }
       }, 200);
       return () => {
@@ -22751,8 +22927,9 @@ function PrimeStyleTryonInner({
         clearInterval(progressIntervalRef.current);
         progressIntervalRef.current = null;
       }
+      progressStartTsRef.current = null;
     }
-  }, [view]);
+  }, [view, t2]);
   reactExports.useEffect(() => {
     return () => {
       if (previewUrl) URL.revokeObjectURL(previewUrl);
@@ -23079,7 +23256,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 = t2("Complete!");
+        if (progressRingRef.current) progressRingRef.current.style.strokeDashoffset = "0";
+        if (progressEtaRef.current) progressEtaRef.current.textContent = t2("Done");
+        if (progressStatusRef.current) {
+          const el2 = progressStatusRef.current;
+          el2.style.opacity = "0";
+          setTimeout(() => {
+            el2.textContent = t2("Complete!");
+            el2.style.opacity = "1";
+          }, 180);
+        }
         cleanupJob();
         setTryOnProcessing(false);
         onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
@@ -23488,25 +23674,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;
@@ -23537,11 +23727,13 @@ function PrimeStyleTryonInner({
       setView("error");
       onError?.({ message, code });
     }
-  }, [selectedFile, productImage, sizingResult, onProcessing, onError, handleVtoUpdate]);
+  }, [selectedFile, productImage, productTitle, sizingResult, onProcessing, onError, handleVtoUpdate]);
   const handleRetryWithFit = reactExports.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",
@@ -23567,7 +23759,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);
@@ -23632,7 +23825,7 @@ function PrimeStyleTryonInner({
     } catch {
       setRetryLoading(false);
     }
-  }, [selectedFile, productImage]);
+  }, [selectedFile, productImage, productTitle]);
   const handleDownload = reactExports.useCallback(() => {
     if (!resultImageUrl) return;
     if (resultImageUrl.startsWith("data:")) {
@@ -24074,6 +24267,8 @@ function PrimeStyleTryonInner({
             progressBarRef,
             progressTextRef,
             progressStatusRef,
+            progressEtaRef,
+            progressRingRef,
             cn,
             t: t2
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.8.57",
+  "version": "5.9.0",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",
@@ -60,8 +60,5 @@
     "terser": "^5.31.0",
     "typescript": "^5.5.0",
     "vite": "^5.4.0"
-  },
-  "dependencies": {
-    "@primestyleai/tryon": "^5.8.46"
   }
 }