@primestyleai/tryon 5.8.38 → 5.8.40

package/dist/react/index.js

@@ -17,11 +17,11 @@ const LEFT_ANKLE = 27;
 const RIGHT_ANKLE = 28;
 const NOSE = 0;
 let poseLandmarker = null;
-let loadingPromise = null;
+let loadingPromise$1 = null;
 async function loadMediaPipe() {
   if (poseLandmarker) return;
-  if (loadingPromise) return loadingPromise;
-  loadingPromise = (async () => {
+  if (loadingPromise$1) return loadingPromise$1;
+  loadingPromise$1 = (async () => {
     const vision = await import(
       /* webpackIgnore: true */
       // @ts-ignore dynamic CDN import
@@ -40,12 +40,12 @@ async function loadMediaPipe() {
       numPoses: 1
     });
   })();
-  return loadingPromise;
+  return loadingPromise$1;
 }
 async function detectMeasurementLines(imageSrc) {
   try {
     await loadMediaPipe();
-    const img = await loadImage(imageSrc);
+    const img = await loadImage$1(imageSrc);
     const result = poseLandmarker.detect(img);
     if (!result?.landmarks?.length || result.landmarks[0].length < 25) {
       return null;
@@ -80,7 +80,7 @@ async function detectMeasurementLines(imageSrc) {
     return null;
   }
 }
-function loadImage(src) {
+function loadImage$1(src) {
   return new Promise((resolve, reject) => {
     const img = new Image();
     img.crossOrigin = "anonymous";
@@ -99,7 +99,7 @@ async function detectBodyLandmarks(imageSrc) {
     await loadMediaPipe();
     let img;
     if (typeof imageSrc === "string") {
-      img = await loadImage(imageSrc);
+      img = await loadImage$1(imageSrc);
     } else {
       img = imageSrc;
     }
@@ -128,6 +128,165 @@ async function detectBodyLandmarks(imageSrc) {
     return null;
   }
 }
+const IDX = {
+  noseTip: 1,
+  noseBridge: 168,
+  leftInnerEye: 133,
+  rightInnerEye: 362,
+  leftOuterEye: 33,
+  rightOuterEye: 263,
+  // Iris landmarks (478-point model with iris refinement)
+  leftIrisCenter: 468,
+  leftIrisRing: [469, 470, 471, 472],
+  rightIrisCenter: 473,
+  rightIrisRing: [474, 475, 476, 477],
+  // Tragus (ear attach point) — best approximations in the face mesh
+  leftTragus: 234,
+  rightTragus: 454,
+  forehead: 10,
+  chin: 152,
+  leftMouth: 61,
+  rightMouth: 291
+};
+const IRIS_DIAMETER_MM = 11.7;
+let faceLandmarker = null;
+let loadingPromise = null;
+async function loadFaceLandmarker() {
+  if (faceLandmarker) return;
+  if (loadingPromise) return loadingPromise;
+  loadingPromise = (async () => {
+    const vision = await import(
+      /* webpackIgnore: true */
+      // @ts-ignore dynamic CDN import
+      "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.33/vision_bundle.mjs"
+    );
+    const { FilesetResolver, FaceLandmarker } = vision;
+    const filesetResolver = await FilesetResolver.forVisionTasks(
+      "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.33/wasm"
+    );
+    faceLandmarker = await FaceLandmarker.createFromOptions(filesetResolver, {
+      baseOptions: {
+        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/latest/face_landmarker.task",
+        delegate: "GPU"
+      },
+      runningMode: "IMAGE",
+      numFaces: 1,
+      outputFaceBlendshapes: false,
+      outputFacialTransformationMatrixes: false
+    });
+  })();
+  return loadingPromise;
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => {
+      const img2 = new Image();
+      img2.onload = () => resolve(img2);
+      img2.onerror = () => reject(new Error("Failed to load image"));
+      img2.src = src;
+    };
+    img.src = src;
+  });
+}
+function irisDiameterPx(ring, imageWidth, imageHeight) {
+  if (ring.length < 4) return 0;
+  const toPx = (p) => ({ x: p.x * imageWidth, y: p.y * imageHeight });
+  const [p0, p1, p2, p3] = ring.map(toPx);
+  const d1 = Math.hypot(p0.x - p2.x, p0.y - p2.y);
+  const d2 = Math.hypot(p1.x - p3.x, p1.y - p3.y);
+  return (d1 + d2) / 2;
+}
+function extractLandmarks(raw) {
+  if (raw.length < 478) return null;
+  const at = (i) => ({ x: raw[i].x, y: raw[i].y, z: raw[i].z });
+  return {
+    noseTip: at(IDX.noseTip),
+    noseBridge: at(IDX.noseBridge),
+    leftInnerEye: at(IDX.leftInnerEye),
+    rightInnerEye: at(IDX.rightInnerEye),
+    leftOuterEye: at(IDX.leftOuterEye),
+    rightOuterEye: at(IDX.rightOuterEye),
+    leftIrisCenter: at(IDX.leftIrisCenter),
+    rightIrisCenter: at(IDX.rightIrisCenter),
+    leftIrisRing: IDX.leftIrisRing.map(at),
+    rightIrisRing: IDX.rightIrisRing.map(at),
+    leftTragus: at(IDX.leftTragus),
+    rightTragus: at(IDX.rightTragus),
+    forehead: at(IDX.forehead),
+    chin: at(IDX.chin),
+    leftMouth: at(IDX.leftMouth),
+    rightMouth: at(IDX.rightMouth)
+  };
+}
+function computeMeasurements(lm, imageWidth, imageHeight) {
+  const leftPx = irisDiameterPx(lm.leftIrisRing, imageWidth, imageHeight);
+  const rightPx = irisDiameterPx(lm.rightIrisRing, imageWidth, imageHeight);
+  const irisPx = (leftPx + rightPx) / 2;
+  let irisConfidence = 1;
+  if (irisPx < 8) irisConfidence = 0.3;
+  else if (Math.abs(leftPx - rightPx) / irisPx > 0.3) irisConfidence = 0.5;
+  else if (Math.abs(leftPx - rightPx) / irisPx > 0.15) irisConfidence = 0.8;
+  const pxToMm = irisPx > 0 ? IRIS_DIAMETER_MM / irisPx : 0;
+  const mmBetween = (a2, b2) => {
+    const pxDist = Math.hypot(
+      (a2.x - b2.x) * imageWidth,
+      (a2.y - b2.y) * imageHeight
+    );
+    return pxDist * pxToMm;
+  };
+  const pd = mmBetween(lm.leftIrisCenter, lm.rightIrisCenter);
+  const bridgeWidth = mmBetween(lm.leftInnerEye, lm.rightInnerEye);
+  const faceWidth = mmBetween(lm.leftTragus, lm.rightTragus);
+  const templeLengthLeft = mmBetween(lm.leftTragus, lm.leftOuterEye);
+  const templeLengthRight = mmBetween(lm.rightTragus, lm.rightOuterEye);
+  const templeLength = (templeLengthLeft + templeLengthRight) / 2;
+  const headWidth = faceWidth * 1.07;
+  const zDepthNorm = Math.abs((lm.forehead.z ?? 0) - (lm.chin.z ?? 0));
+  const rawHeadDepthMm = zDepthNorm * imageWidth * pxToMm;
+  const headDepth = Math.max(170, Math.min(210, rawHeadDepthMm || 190));
+  const a = headWidth / 2;
+  const b = headDepth / 2;
+  const headCircumference = Math.PI * Math.sqrt(2 * (a * a + b * b));
+  return {
+    measurements: {
+      irisDiameter: IRIS_DIAMETER_MM,
+      pd: round1(pd),
+      bridgeWidth: round1(bridgeWidth),
+      faceWidth: round1(faceWidth),
+      templeLengthLeft: round1(templeLengthLeft),
+      templeLengthRight: round1(templeLengthRight),
+      templeLength: round1(templeLength),
+      headWidth: round1(headWidth),
+      headDepth: round1(headDepth),
+      headCircumference: round1(headCircumference)
+    },
+    irisConfidence
+  };
+}
+function round1(n) {
+  return Math.round(n * 10) / 10;
+}
+async function detectFaceMeasurements(imageSrc) {
+  try {
+    await loadFaceLandmarker();
+    const img = typeof imageSrc === "string" ? await loadImage(imageSrc) : imageSrc;
+    const result = faceLandmarker.detect(img);
+    if (!result?.faceLandmarks?.length) return null;
+    const raw = result.faceLandmarks[0];
+    const landmarks = extractLandmarks(raw);
+    if (!landmarks) return null;
+    const imageWidth = img.naturalWidth || img.width;
+    const imageHeight = img.naturalHeight || img.height;
+    const { measurements, irisConfidence } = computeMeasurements(landmarks, imageWidth, imageHeight);
+    return { landmarks, measurementsMm: measurements, irisConfidence, imageWidth, imageHeight };
+  } catch (err) {
+    console.error("[PS-SDK] Face detection failed:", err);
+    return null;
+  }
+}
 function parseRange(s) {
   const ns = s.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
   return ns.length ? { min: Math.min(...ns), max: Math.max(...ns) } : { min: 0, max: 0 };
@@ -3509,6 +3668,101 @@ const STYLES = `
   }
   .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);
@@ -5370,6 +5624,127 @@ const STYLES = `
     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;
@@ -7287,6 +7662,102 @@ const SKELETON_CONNECTIONS = [
   ["rightHip", "rightKnee"],
   ["rightKnee", "rightAnkle"]
 ];
+function FaceOverlay({
+  landmarks,
+  imgWidth,
+  imgHeight
+}) {
+  const W = imgWidth;
+  const H = 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__ */ jsxs("svg", { className: "ps-tryon-pose-overlay", viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "xMidYMid meet", children: [
+    connections.map(([a, b], i) => /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: a.x * W,
+        y1: a.y * H,
+        x2: b.x * W,
+        y2: b.y * H,
+        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)) * W / 2 : 6;
+      return /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: c.x * W,
+          cy: c.y * H,
+          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 }, i) => /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: p.x * W,
+          cy: p.y * H,
+          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__ */ jsx(
+        "circle",
+        {
+          cx: p.x * W,
+          cy: p.y * H,
+          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 W = imgWidth;
   const H = imgHeight;
@@ -8151,6 +8622,8 @@ function SizeResultView({
   handleTryOnSubmit,
   tryOnProcessing,
   bodyLandmarks,
+  faceLandmarks = null,
+  measurementType = "body",
   estimationDone = false,
   activeSection,
   setActiveSection,
@@ -8437,28 +8910,33 @@ function SizeResultView({
             onLoad: handleImgLoad
           }
         ),
-        bodyLandmarks && /* @__PURE__ */ jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h })
+        measurementType === "face" || measurementType === "head" ? faceLandmarks && /* @__PURE__ */ jsx(FaceOverlay, { landmarks: faceLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h }) : bodyLandmarks && /* @__PURE__ */ jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
-        /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${bodyLandmarks ? " ps-done" : " ps-active"}`, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: bodyLandmarks ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-          /* @__PURE__ */ jsx("span", { children: t("Detecting body pose") })
-        ] }),
-        !sizingDone && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : bodyLandmarks ? " ps-active" : ""}`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !bodyLandmarks ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
-            /* @__PURE__ */ jsx("span", { children: t("Analyzing your size") })
+      (() => {
+        const isFaceCategory = measurementType === "face" || measurementType === "head";
+        const detectionDone = isFaceCategory ? !!faceLandmarks : !!bodyLandmarks;
+        const detectLabel = isFaceCategory ? measurementType === "head" ? t("Detecting head") : t("Detecting face") : t("Detecting body pose");
+        return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-right-col ps-tryon-snap-steps", children: [
+          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${detectionDone ? " ps-done" : " ps-active"}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: detectionDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
+            /* @__PURE__ */ jsx("span", { children: detectLabel })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-            /* @__PURE__ */ jsx("span", { children: t("Finding best fit for you") })
+          !sizingDone && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : detectionDone ? " ps-active" : ""}`, children: [
+              /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !detectionDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
+              /* @__PURE__ */ jsx("span", { children: t("Analyzing your size") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
+              /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
+              /* @__PURE__ */ jsx("span", { children: t("Finding best fit for you") })
+            ] })
+          ] }),
+          tryOnProcessing && /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
+            /* @__PURE__ */ jsx("span", { children: t("Generating virtual try-on") })
           ] })
-        ] }),
-        tryOnProcessing && /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${tryOnDone ? " ps-done" : " ps-active"}`, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: tryOnDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
-          /* @__PURE__ */ jsx("span", { children: t("Generating virtual try-on") })
-        ] })
-      ] })
+        ] });
+      })()
     ] }),
     (allDone || sizingResult && !isSnapProcessing) && /* @__PURE__ */ jsxs(Fragment, { children: [
       isMultiSection ? activeSection ? (
@@ -9257,9 +9735,18 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t }
   const photoInputRef = useRef(null);
   const nameInputRef = useRef(null);
   const [nameShaking, setNameShaking] = useState(false);
+  const [ageConfirmed, setAgeConfirmed] = 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(t("Please confirm that the person in the photo is 18 or older before uploading."));
+      return;
+    }
     if (!file.type.startsWith("image/")) {
       setError(t("Please upload an image file"));
       return;
@@ -9840,18 +10327,71 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t }
         /* @__PURE__ */ jsx("div", { className: "ps-cpw-image-left", children: photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-preview-frame", children: [
           /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo"), className: "ps-cpw-photo-preview-img" }),
           /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-photo-remove", onClick: handleRemovePhoto, "aria-label": t("Remove photo"), children: "×" }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-photo-retake-pill", onClick: () => photoInputRef.current?.click(), children: t("Retake") })
-        ] }) : /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-cpw-dropzone", onClick: () => photoInputRef.current?.click(), disabled: photoUploading, children: [
-          /* @__PURE__ */ jsx("img", { src: photoUploadIllustrationImg, alt: "", "aria-hidden": "true", className: "ps-cpw-dropzone-silhouette" }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-dropzone-content", children: [
-            /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-              /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
-              /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "ps-cpw-dropzone-title", children: photoUploading ? t("Processing...") : t("Drop a photo or click to upload") }),
-            /* @__PURE__ */ jsx("span", { className: "ps-cpw-dropzone-hint", children: t("JPEG · PNG · WebP · up to 10MB") })
-          ] })
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-photo-retake-pill", onClick: openFilePicker, children: t("Retake") })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-cpw-dropzone-wrap", children: [
+          /* @__PURE__ */ 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__ */ jsx("img", { src: photoUploadIllustrationImg, alt: "", "aria-hidden": "true", className: "ps-cpw-dropzone-silhouette" }),
+                /* @__PURE__ */ jsxs("div", { className: "ps-cpw-dropzone-content", children: [
+                  /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+                    /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "ps-cpw-dropzone-title", children: photoUploading ? t("Processing...") : t("Drop a photo or click to upload") }),
+                  /* @__PURE__ */ jsx("span", { className: "ps-cpw-dropzone-hint", children: t("JPEG · PNG · WebP · up to 10MB") })
+                ] })
+              ]
+            }
+          ),
+          ageConfirmed === null && /* @__PURE__ */ jsx("div", { className: "ps-cpw-age-gate", role: "dialog", "aria-labelledby": "ps-cpw-age-gate-q", children: /* @__PURE__ */ jsxs("div", { className: "ps-cpw-age-gate-card", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-cpw-age-gate-eyebrow", children: t("AGE VERIFICATION") }),
+            /* @__PURE__ */ jsx("div", { id: "ps-cpw-age-gate-q", className: "ps-cpw-age-gate-question", children: t("Is the person in this photo 18 years or older?") }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-cpw-age-gate-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-primary",
+                  onClick: () => {
+                    setAgeConfirmed(true);
+                    setError("");
+                  },
+                  children: t("Yes, 18 or older")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-secondary",
+                  onClick: () => setAgeConfirmed(false),
+                  children: t("No, under 18")
+                }
+              )
+            ] })
+          ] }) }),
+          ageConfirmed === false && /* @__PURE__ */ jsx("div", { className: "ps-cpw-age-gate", role: "alert", children: /* @__PURE__ */ jsxs("div", { className: "ps-cpw-age-gate-card ps-cpw-age-gate-card-blocked", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-cpw-age-gate-eyebrow ps-cpw-age-gate-eyebrow-blocked", children: t("UPLOAD NOT ALLOWED") }),
+            /* @__PURE__ */ jsx("div", { className: "ps-cpw-age-gate-question", children: t("For your safety, we cannot process photos of people under 18.") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ps-cpw-age-gate-btn ps-cpw-age-gate-btn-secondary",
+                onClick: () => setAgeConfirmed(null),
+                children: t("Go back")
+              }
+            )
+          ] }) })
         ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "ps-cpw-image-right", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-fields ps-cpw-inline-fields", children: /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
@@ -9882,6 +10422,13 @@ function CreateProfileWizard({ onSave, onCancel, onPhotoPreview, onEstimate, t }
               ] })
             ] })
           ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-legal-notice", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-cpw-legal-notice-head", children: [
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+              /* @__PURE__ */ jsx("span", { children: t("LEGAL NOTICE") })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "ps-cpw-legal-notice-body", children: t("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__ */ jsx("div", { className: "ps-cpw-error", children: error })
         ] })
       ] }, "image-photo"),
@@ -10725,6 +11272,8 @@ function PhotoStepMobile({
   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: [
       /* @__PURE__ */ jsx("h2", { className: "ps-pm-title", children: isCloseUp ? t("Upload a face photo or selfie") : t("Review your photo") }),
@@ -10752,19 +11301,46 @@ function PhotoStepMobile({
           children: /* @__PURE__ */ jsx(CloseIconSm, {})
         }
       )
-    ] }) : /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "ps-pm-preview-empty",
-        onClick: () => fileRef.current?.click(),
-        children: [
-          /* @__PURE__ */ jsx(UploadIconLg, {}),
-          /* @__PURE__ */ jsx("span", { className: "ps-pm-preview-empty-title", children: t("Tap to upload") }),
-          /* @__PURE__ */ jsx("span", { className: "ps-pm-preview-empty-hint", children: t("JPEG, PNG up to 10MB") })
-        ]
-      }
-    ) }),
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ 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__ */ jsx(UploadIconLg, {}),
+            /* @__PURE__ */ jsx("span", { className: "ps-pm-preview-empty-title", children: t("Tap to upload") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pm-preview-empty-hint", children: t("JPEG, PNG up to 10MB") })
+          ]
+        }
+      ),
+      ageConfirmed === null && /* @__PURE__ */ jsx("div", { className: "ps-pm-age-gate", role: "dialog", children: /* @__PURE__ */ jsxs("div", { className: "ps-pm-age-gate-card", children: [
+        /* @__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, 18 or older") }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pm-age-gate-btn ps-pm-age-gate-btn-secondary", onClick: () => setAgeConfirmed(false), children: t("No, under 18") })
+        ] })
+      ] }) }),
+      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__ */ jsxs("div", { className: "ps-pm-legal-notice", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-pm-legal-notice-head", children: [
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }),
+        /* @__PURE__ */ jsx("span", { children: t("LEGAL NOTICE") })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "ps-pm-legal-notice-body", children: t("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__ */ jsxs("div", { className: "ps-pm-checklist", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-pm-checklist-body", children: [
@@ -12118,7 +12694,6 @@ function HeadSizeView(props) {
       title: "Headwear Measurements",
       fields,
       photoVariant: "close-up",
-      disablePhotoUpload: true,
       ...rest
     }
   );
@@ -12178,7 +12753,6 @@ function FaceSizeView(props) {
       fields,
       unitOptions: EYEWEAR_UNIT_OPTIONS,
       photoVariant: "close-up",
-      disablePhotoUpload: true,
       ...rest
     }
   );
@@ -12288,6 +12862,7 @@ function PrimeStyleTryonInner({
   const bodyRef = useRef(null);
   const modelPoseRef = useRef(null);
   const [bodyLandmarks, setBodyLandmarks] = useState(null);
+  const [faceLandmarks, setFaceLandmarks] = useState(null);
   const selectedFileRef = useRef(null);
   useEffect(() => {
     try {
@@ -12866,6 +13441,55 @@ function PrimeStyleTryonInner({
     setSizingLoading(true);
     setEstimationDone(false);
     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 },
+          sizingUnit: measurementType === "head" ? "cm" : "mm",
+          category: measurementType,
+          bodyImage: data.photoBase64
+        };
+        if (faceResult) {
+          facePayload.faceMeasurementsMm = faceResult.measurementsMm;
+          facePayload.faceLandmarks = faceResult.landmarks;
+          facePayload.irisConfidence = faceResult.irisConfidence;
+        }
+        const recRes = await fetch(`${baseUrl}/api/v1/sizing/face-recommend`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
+          body: JSON.stringify(facePayload)
+        });
+        if (recRes.ok) {
+          const recData = await recRes.json();
+          setSizingResult(recData);
+          onComplete?.(recData);
+          persistResultToProfile(
+            {
+              gender: data.gender,
+              height: data.height,
+              weight: data.weight,
+              heightUnit: data.heightUnit,
+              weightUnit: data.weightUnit,
+              age: data.age,
+              bodyImage: data.photoBase64
+            },
+            recData
+          );
+        } else {
+          setEstimationDone(true);
+        }
+      } catch (err) {
+        console.error("[ps-sdk] face-recommend failed:", err);
+        setEstimationDone(true);
+      }
+      setSizingLoading(false);
+      return;
+    }
     modelPoseRef.current = null;
     setBodyLandmarks(null);
     detectMeasurementLines(objUrl).then((lines) => {
@@ -13476,6 +14100,8 @@ function PrimeStyleTryonInner({
             handleTryOnSubmit,
             tryOnProcessing,
             bodyLandmarks,
+            faceLandmarks,
+            measurementType: detectMeasurementType(productTitle),
             activeSection,
             setActiveSection,
             onResetTryOn: () => {