@primestyleai/tryon 5.8.39 → 5.8.40

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

@@ -2,7 +2,7 @@ import type { TranslateFn } from "../../i18n";
 import type { FitAreaInfo } from "../../types";
 import type { ViewState, SizeGuide, SizingResult } from "../types";
 import type { BodyLandmarks } from "../../pose-detect";
-export declare function SizeResultView({ sizingLoading, sizingResult, sizeGuide, resultImageUrl, productImage, productTitle, sizingUnit, setView, handleDownload, onRetryWithFit, retryLoading, selectedFile, previewUrl, handleFileSelect, handleRemovePreview, handleTryOnSubmit, tryOnProcessing, bodyLandmarks, estimationDone, activeSection, setActiveSection, onResetTryOn, onClose, userHeightCm, t, }: {
+export declare function SizeResultView({ sizingLoading, sizingResult, sizeGuide, resultImageUrl, productImage, productTitle, sizingUnit, setView, handleDownload, onRetryWithFit, retryLoading, selectedFile, previewUrl, handleFileSelect, handleRemovePreview, handleTryOnSubmit, tryOnProcessing, bodyLandmarks, faceLandmarks, measurementType, estimationDone, activeSection, setActiveSection, onResetTryOn, onClose, userHeightCm, t, }: {
     estimationDone?: boolean;
     sizingLoading: boolean;
     sizingResult: SizingResult | null;
@@ -22,6 +22,8 @@ export declare function SizeResultView({ sizingLoading, sizingResult, sizeGuide,
     handleTryOnSubmit: (overrideFile?: File) => void;
     tryOnProcessing?: boolean;
     bodyLandmarks?: BodyLandmarks | null;
+    faceLandmarks?: import("../../face-detect").FaceLandmarks | null;
+    measurementType?: "body" | "face" | "head" | "foot";
     activeSection: string | null;
     setActiveSection: (s: string | null) => void;
     /** Clear try-on result + uploaded photo so the user can retry from the photo guide. */

package/dist/storefront/primestyle-tryon.js

@@ -13092,6 +13092,101 @@ const STYLES$1 = `
   }
   .ps-pm-preview-remove:hover { background: #FFFFFF; }
 
+  /* ── Mobile age-gate overlay ── */
+  .ps-pm-preview-blurred {
+    filter: blur(6px) saturate(0.7);
+    pointer-events: none;
+    user-select: none;
+  }
+  .ps-pm-age-gate {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    padding: max(16px, 4vw);
+    background: rgba(255, 255, 255, 0.55);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 2;
+    animation: ps-pm-age-gate-in 0.28s ease-out both;
+  }
+  @keyframes ps-pm-age-gate-in {
+    0%   { opacity: 0; transform: scale(0.97); }
+    100% { opacity: 1; transform: scale(1); }
+  }
+  .ps-pm-age-gate-card {
+    width: 100%; max-width: max(280px, 82vw);
+    padding: max(18px, 4.6vw) max(16px, 4.2vw);
+    background: #FFFFFF;
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: max(12px, 3vw);
+    box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.25),
+                0 8px 16px -8px rgba(17, 24, 39, 0.15);
+    display: flex; flex-direction: column;
+    align-items: center; text-align: center;
+    gap: max(8px, 2vw);
+  }
+  .ps-pm-age-gate-eyebrow {
+    font-size: max(10px, 2.6vw); font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-accent);
+  }
+  .ps-pm-age-gate-eyebrow-blocked { color: #C02626; }
+  .ps-pm-age-gate-question {
+    font-size: max(14px, 3.8vw); font-weight: 600;
+    line-height: 1.35; color: var(--ps-text-primary); margin: 0;
+  }
+  .ps-pm-age-gate-actions {
+    display: flex; flex-direction: column; gap: max(8px, 2vw);
+    width: 100%; margin-top: max(4px, 1vw);
+  }
+  .ps-pm-age-gate-btn {
+    width: 100%;
+    padding: max(11px, 2.9vw) max(14px, 3.6vw);
+    border-radius: 999px;
+    font-family: inherit;
+    font-size: max(12px, 3.2vw); font-weight: 700;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: background 0.18s, border-color 0.18s, color 0.18s;
+  }
+  .ps-pm-age-gate-btn-primary {
+    background: var(--ps-accent);
+    color: #FFFFFF;
+    border: 1.5px solid var(--ps-accent);
+  }
+  .ps-pm-age-gate-btn-secondary {
+    background: transparent;
+    color: var(--ps-text-primary);
+    border: 1.5px solid var(--ps-border-color);
+  }
+  .ps-pm-age-gate-btn-secondary:active {
+    background: var(--ps-bg-secondary);
+  }
+
+  /* ── Mobile legal notice ── */
+  .ps-pm-legal-notice {
+    margin-top: max(10px, 2.6vw);
+    background: rgba(33, 84, 239, 0.04);
+    border: 1px solid rgba(33, 84, 239, 0.16);
+    border-radius: max(10px, 2.6vw);
+    padding: max(10px, 2.6vw) max(12px, 3.1vw);
+    display: flex; flex-direction: column;
+    gap: max(4px, 1vw);
+  }
+  .ps-pm-legal-notice-head {
+    display: flex; align-items: center;
+    gap: max(6px, 1.5vw);
+    font-size: max(10px, 2.6vw); font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-accent);
+  }
+  .ps-pm-legal-notice-head svg { width: max(13px, 3.4vw); height: max(13px, 3.4vw); }
+  .ps-pm-legal-notice-body {
+    margin: 0;
+    font-size: max(11px, 2.9vw);
+    line-height: 1.5;
+    color: var(--ps-text-secondary);
+  }
+
   /* Checklist for accuracy card */
   .ps-pm-checklist {
     display: flex; gap: max(12px, 3.1vw);
@@ -14953,6 +15048,127 @@ const STYLES$1 = `
     transition: background 0.18s;
   }
   .ps-cpw-photo-retake:hover { background: rgba(33, 84, 239, 0.08); }
+
+  /* ── Age-gate overlay on the dropzone ──
+     Dropzone stays visible but blurred; overlay shows a premium card
+     with the 18+ confirmation question and two pill buttons. */
+  .ps-cpw-dropzone-wrap {
+    position: relative;
+    flex: 1; min-height: 0;
+    width: 100%; box-sizing: border-box;
+    display: flex; flex-direction: column;
+  }
+  .ps-cpw-dropzone-blurred {
+    filter: blur(6px) saturate(0.7);
+    pointer-events: none;
+    user-select: none;
+  }
+  .ps-cpw-age-gate {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    padding: clamp(12px, 1vw, 24px);
+    border-radius: clamp(10px, 0.75vw, 16px);
+    background: rgba(255, 255, 255, 0.55);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    z-index: 2;
+    animation: ps-cpw-age-gate-in 0.28s ease-out both;
+  }
+  @keyframes ps-cpw-age-gate-in {
+    0%   { opacity: 0; transform: scale(0.97); }
+    100% { opacity: 1; transform: scale(1); }
+  }
+  .ps-cpw-age-gate-card {
+    width: 100%; max-width: clamp(240px, 24vw, 420px);
+    padding: clamp(16px, 1.4vw, 28px) clamp(18px, 1.6vw, 32px);
+    background: #FFFFFF;
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: clamp(10px, 0.9vw, 18px);
+    box-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.25),
+                0 8px 16px -8px rgba(17, 24, 39, 0.15);
+    display: flex; flex-direction: column;
+    align-items: center; text-align: center;
+    gap: clamp(8px, 0.7vw, 14px);
+  }
+  .ps-cpw-age-gate-eyebrow {
+    font-size: clamp(9px, 0.62vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    color: var(--ps-accent);
+  }
+  .ps-cpw-age-gate-eyebrow-blocked { color: #C02626; }
+  .ps-cpw-age-gate-question {
+    font-size: clamp(13px, 0.95vw, 18px);
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--ps-text-primary);
+    margin: 0;
+  }
+  .ps-cpw-age-gate-actions {
+    display: flex; gap: clamp(8px, 0.65vw, 14px);
+    width: 100%;
+    margin-top: clamp(4px, 0.35vw, 8px);
+  }
+  .ps-cpw-age-gate-btn {
+    flex: 1;
+    padding: clamp(9px, 0.75vw, 14px) clamp(12px, 1vw, 18px);
+    border-radius: 999px;
+    font-family: inherit;
+    font-size: clamp(11px, 0.78vw, 14px);
+    font-weight: 700;
+    letter-spacing: 0.02em;
+    cursor: pointer;
+    transition: transform 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
+  }
+  .ps-cpw-age-gate-btn:hover { transform: translateY(-1px); }
+  .ps-cpw-age-gate-btn-primary {
+    background: var(--ps-accent);
+    color: #FFFFFF;
+    border: 1.5px solid var(--ps-accent);
+  }
+  .ps-cpw-age-gate-btn-primary:hover { background: color-mix(in srgb, var(--ps-accent) 88%, #000); }
+  .ps-cpw-age-gate-btn-secondary {
+    background: transparent;
+    color: var(--ps-text-primary);
+    border: 1.5px solid var(--ps-border-color);
+  }
+  .ps-cpw-age-gate-btn-secondary:hover {
+    background: var(--ps-bg-secondary);
+    border-color: var(--ps-text-muted);
+  }
+  .ps-cpw-age-gate-card-blocked { border-color: rgba(192, 38, 38, 0.35); }
+
+  /* ── Legal notice card on the right column ──
+     Soft neutral card with a small shield icon; matches photo-guide width. */
+  .ps-cpw-legal-notice {
+    background: rgba(33, 84, 239, 0.04);
+    border: 1px solid rgba(33, 84, 239, 0.16);
+    border-radius: clamp(10px, 0.75vw, 16px);
+    padding: clamp(10px, 0.9vw, 18px) clamp(12px, 1vw, 20px);
+    display: flex; flex-direction: column;
+    gap: clamp(5px, 0.45vw, 10px);
+  }
+  .ps-cpw-legal-notice-head {
+    display: flex; align-items: center;
+    gap: clamp(6px, 0.5vw, 10px);
+    font-size: clamp(9px, 0.62vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ps-accent);
+  }
+  .ps-cpw-legal-notice-head svg {
+    width: clamp(12px, 0.85vw, 15px);
+    height: clamp(12px, 0.85vw, 15px);
+  }
+  .ps-cpw-legal-notice-body {
+    margin: 0;
+    font-size: clamp(10px, 0.7vw, 12.5px);
+    line-height: 1.5;
+    color: var(--ps-text-secondary);
+  }
+
   .ps-cpw-hint {
     font-size: clamp(10px, 0.72vw, 13px);
     line-height: 1.6;
@@ -16870,6 +17086,102 @@ const SKELETON_CONNECTIONS = [
   ["rightHip", "rightKnee"],
   ["rightKnee", "rightAnkle"]
 ];
+function FaceOverlay({
+  landmarks,
+  imgWidth,
+  imgHeight
+}) {
+  const W2 = imgWidth;
+  const H2 = imgHeight;
+  const pts = [
+    { key: "forehead", p: landmarks.forehead },
+    { key: "chin", p: landmarks.chin },
+    { key: "noseTip", p: landmarks.noseTip },
+    { key: "noseBridge", p: landmarks.noseBridge },
+    { key: "leftInnerEye", p: landmarks.leftInnerEye },
+    { key: "rightInnerEye", p: landmarks.rightInnerEye },
+    { key: "leftOuterEye", p: landmarks.leftOuterEye },
+    { key: "rightOuterEye", p: landmarks.rightOuterEye },
+    { key: "leftTragus", p: landmarks.leftTragus },
+    { key: "rightTragus", p: landmarks.rightTragus },
+    { key: "leftMouth", p: landmarks.leftMouth },
+    { key: "rightMouth", p: landmarks.rightMouth }
+  ];
+  const connections = [
+    // Face axis
+    [landmarks.forehead, landmarks.noseBridge],
+    [landmarks.noseBridge, landmarks.noseTip],
+    [landmarks.noseTip, landmarks.chin],
+    // Horizontal eye line
+    [landmarks.leftOuterEye, landmarks.leftInnerEye],
+    [landmarks.leftInnerEye, landmarks.rightInnerEye],
+    [landmarks.rightInnerEye, landmarks.rightOuterEye],
+    // Ears
+    [landmarks.leftTragus, landmarks.leftOuterEye],
+    [landmarks.rightOuterEye, landmarks.rightTragus],
+    // Mouth line
+    [landmarks.leftMouth, landmarks.rightMouth]
+  ];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "ps-tryon-pose-overlay", viewBox: `0 0 ${W2} ${H2}`, preserveAspectRatio: "xMidYMid meet", children: [
+    connections.map(([a, b], i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "line",
+      {
+        x1: a.x * W2,
+        y1: a.y * H2,
+        x2: b.x * W2,
+        y2: b.y * H2,
+        stroke: "rgba(100,210,255,0.55)",
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        opacity: "0",
+        style: { animation: `ps-pose-fade 0.4s ease ${i * 0.05}s forwards` }
+      },
+      `fl-${i}`
+    )),
+    [landmarks.leftIrisCenter, landmarks.rightIrisCenter].map((c, i) => {
+      const ring = i === 0 ? landmarks.leftIrisRing : landmarks.rightIrisRing;
+      const rx = ring?.length ? Math.abs((ring[0]?.x ?? c.x) - (ring[2]?.x ?? c.x)) * W2 / 2 : 6;
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "circle",
+        {
+          cx: c.x * W2,
+          cy: c.y * H2,
+          r: Math.max(6, rx),
+          fill: "none",
+          stroke: "rgba(255,230,120,0.95)",
+          strokeWidth: "2.5",
+          opacity: "0",
+          style: { animation: `ps-pose-fade 0.3s ease ${0.3 + i * 0.1}s forwards` }
+        },
+        `iris-${i}`
+      );
+    }),
+    pts.map(({ key, p: p2 }, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "circle",
+        {
+          cx: p2.x * W2,
+          cy: p2.y * H2,
+          r: "11",
+          fill: "rgba(100,210,255,0.22)",
+          opacity: "0",
+          style: { animation: `ps-pose-fade 0.3s ease ${i * 0.04}s forwards` }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "circle",
+        {
+          cx: p2.x * W2,
+          cy: p2.y * H2,
+          r: "6",
+          fill: "rgba(100,210,255,0.95)",
+          opacity: "0",
+          style: { animation: `ps-pose-fade 0.3s ease ${i * 0.04}s forwards, ps-dot-pulse 1.5s ease-in-out ${0.5 + i * 0.04}s infinite` }
+        }
+      )
+    ] }, key))
+  ] });
+}
 function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
   const W2 = imgWidth;
   const H2 = imgHeight;
@@ -17734,6 +18046,8 @@ function SizeResultView({
   handleTryOnSubmit,
   tryOnProcessing,
   bodyLandmarks,
+  faceLandmarks = null,
+  measurementType = "body",
   estimationDone = false,
   activeSection,
   setActiveSection,
@@ -18020,28 +18334,33 @@ function SizeResultView({
             onLoad: handleImgLoad
           }
         ),
-        bodyLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h })
+        measurementType === "face" || measurementType === "head" ? faceLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx(FaceOverlay, { landmarks: faceLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h }) : bodyLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${bodyLandmarks ? " ps-done" : " ps-active"}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: bodyLandmarks ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Detecting body pose") })
-        ] }),
-        !sizingDone && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : bodyLandmarks ? " ps-active" : ""}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !bodyLandmarks ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Analyzing your size") })
+      (() => {
+        const isFaceCategory = measurementType === "face" || measurementType === "head";
+        const detectionDone = isFaceCategory ? !!faceLandmarks : !!bodyLandmarks;
+        const detectLabel = isFaceCategory ? measurementType === "head" ? t2("Detecting head") : t2("Detecting face") : t2("Detecting body pose");
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${detectionDone ? " ps-done" : " ps-active"}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: detectionDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: detectLabel })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Finding best fit for you") })
+          !sizingDone && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : detectionDone ? " ps-active" : ""}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !detectionDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Analyzing your size") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Finding best fit for you") })
+            ] })
+          ] }),
+          tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Generating virtual try-on") })
           ] })
-        ] }),
-        tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Generating virtual try-on") })
-        ] })
-      ] })
+        ] });
+      })()
     ] }),
     (allDone || sizingResult && !isSnapProcessing) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       isMultiSection ? activeSection ? (
@@ -18840,9 +19159,18 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t:
   const photoInputRef = reactExports.useRef(null);
   const nameInputRef = reactExports.useRef(null);
   const [nameShaking, setNameShaking] = reactExports.useState(false);
+  const [ageConfirmed, setAgeConfirmed] = reactExports.useState(null);
+  const openFilePicker = () => {
+    if (ageConfirmed !== true) return;
+    photoInputRef.current?.click();
+  };
   const handlePhotoSelect = async (e) => {
     const file = e.target.files?.[0];
     if (!file) return;
+    if (ageConfirmed !== true) {
+      setError(t2("Please confirm that the person in the photo is 18 or older before uploading."));
+      return;
+    }
     if (!file.type.startsWith("image/")) {
       setError(t2("Please upload an image file"));
       return;
@@ -19423,18 +19751,71 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t:
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-image-left", children: photoBase64 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-photo-preview-frame", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: photoBase64, alt: t2("Profile photo"), className: "ps-cpw-photo-preview-img" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-cpw-photo-remove", onClick: handleRemovePhoto, "aria-label": t2("Remove photo"), children: "×" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-cpw-photo-retake-pill", onClick: () => photoInputRef.current?.click(), children: t2("Retake") })
-        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "ps-cpw-dropzone", onClick: () => photoInputRef.current?.click(), disabled: photoUploading, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: photoUploadIllustrationImg, alt: "", "aria-hidden": "true", className: "ps-cpw-dropzone-silhouette" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-dropzone-content", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "ps-cpw-dropzone-upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "17 8 12 3 7 8" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-cpw-dropzone-title", children: photoUploading ? t2("Processing...") : t2("Drop a photo or click to upload") }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-cpw-dropzone-hint", children: t2("JPEG · PNG · WebP · up to 10MB") })
-          ] })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-cpw-photo-retake-pill", onClick: openFilePicker, children: t2("Retake") })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-dropzone-wrap", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              className: `ps-cpw-dropzone${ageConfirmed !== true ? " ps-cpw-dropzone-blurred" : ""}`,
+              onClick: openFilePicker,
+              disabled: photoUploading || ageConfirmed !== true,
+              "aria-hidden": ageConfirmed !== true,
+              tabIndex: ageConfirmed !== true ? -1 : 0,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: photoUploadIllustrationImg, alt: "", "aria-hidden": "true", className: "ps-cpw-dropzone-silhouette" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-dropzone-content", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { className: "ps-cpw-dropzone-upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "17 8 12 3 7 8" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-cpw-dropzone-title", children: photoUploading ? t2("Processing...") : t2("Drop a photo or click to upload") }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-cpw-dropzone-hint", children: t2("JPEG · PNG · WebP · up to 10MB") })
+                ] })
+              ]
+            }
+          ),
+          ageConfirmed === null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-age-gate", role: "dialog", "aria-labelledby": "ps-cpw-age-gate-q", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-age-gate-card", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-age-gate-eyebrow", children: t2("AGE VERIFICATION") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: "ps-cpw-age-gate-q", className: "ps-cpw-age-gate-question", children: t2("Is the person in this photo 18 years or older?") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-age-gate-actions", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-primary",
+                  onClick: () => {
+                    setAgeConfirmed(true);
+                    setError("");
+                  },
+                  children: t2("Yes, 18 or older")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-secondary",
+                  onClick: () => setAgeConfirmed(false),
+                  children: t2("No, under 18")
+                }
+              )
+            ] })
+          ] }) }),
+          ageConfirmed === false && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-age-gate", role: "alert", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-age-gate-card ps-cpw-age-gate-card-blocked", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-age-gate-eyebrow ps-cpw-age-gate-eyebrow-blocked", children: t2("UPLOAD NOT ALLOWED") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-age-gate-question", children: t2("For your safety, we cannot process photos of people under 18.") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-secondary",
+                onClick: () => setAgeConfirmed(null),
+                children: t2("Go back")
+              }
+            )
+          ] }) })
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-image-right", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-inline-fields ps-cpw-inline-fields", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-inline-row", children: [
@@ -19465,6 +19846,13 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t:
               ] })
             ] })
           ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-legal-notice", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-legal-notice-head", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("LEGAL NOTICE") })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-cpw-legal-notice-body", children: t2("Your image will be used to generate a virtual try-on preview showing how selected items may look and fit. Images are processed securely and are not stored after generation.") })
+          ] }),
           error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-error", children: error })
         ] })
       ] }, "image-photo"),
@@ -20308,6 +20696,8 @@ function PhotoStepMobile({
   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: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-pm-title", children: isCloseUp ? t2("Upload a face photo or selfie") : t2("Review your photo") }),
@@ -20335,19 +20725,46 @@ function PhotoStepMobile({
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIconSm, {})
         }
       )
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        className: "ps-pm-preview-empty",
-        onClick: () => fileRef.current?.click(),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIconLg, {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-pm-preview-empty-title", children: t2("Tap to upload") }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-pm-preview-empty-hint", children: t2("JPEG, PNG up to 10MB") })
-        ]
-      }
-    ) }),
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          className: `ps-pm-preview-empty${gated ? " ps-pm-preview-blurred" : ""}`,
+          onClick: () => {
+            if (!gated) fileRef.current?.click();
+          },
+          disabled: gated,
+          "aria-hidden": gated,
+          tabIndex: gated ? -1 : 0,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIconLg, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-pm-preview-empty-title", children: t2("Tap to upload") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-pm-preview-empty-hint", children: t2("JPEG, PNG up to 10MB") })
+          ]
+        }
+      ),
+      ageConfirmed === null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-age-gate", role: "dialog", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-age-gate-card", children: [
+        /* @__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, 18 or older") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t2("No, under 18") })
+        ] })
+      ] }) }),
+      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.jsxs("div", { className: "ps-pm-legal-notice", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-legal-notice-head", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("LEGAL NOTICE") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-pm-legal-notice-body", children: t2("Your image will be used to generate a virtual try-on preview showing how selected items may look and fit. Images are processed securely and are not stored after generation.") })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-checklist", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoIcon, {}) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-checklist-body", children: [
@@ -21869,6 +22286,7 @@ function PrimeStyleTryonInner({
   const bodyRef = reactExports.useRef(null);
   const modelPoseRef = reactExports.useRef(null);
   const [bodyLandmarks, setBodyLandmarks] = reactExports.useState(null);
+  const [faceLandmarks, setFaceLandmarks] = reactExports.useState(null);
   const selectedFileRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     try {
@@ -22449,8 +22867,10 @@ function PrimeStyleTryonInner({
     setView("size-result");
     const measurementType = detectMeasurementType(productTitle);
     if (measurementType === "face" || measurementType === "head") {
+      setFaceLandmarks(null);
       try {
         const faceResult = await detectFaceMeasurements(objUrl);
+        if (faceResult) setFaceLandmarks(faceResult.landmarks);
         const facePayload = {
           product: { title: productTitle },
           sizeGuide: sizeGuide ?? { found: false },
@@ -23104,6 +23524,8 @@ function PrimeStyleTryonInner({
             handleTryOnSubmit,
             tryOnProcessing,
             bodyLandmarks,
+            faceLandmarks,
+            measurementType: detectMeasurementType(productTitle),
             activeSection,
             setActiveSection,
             onResetTryOn: () => {

package/package.json

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