@primestyleai/tryon 5.6.16 → 5.6.18

package/dist/react/index.js

@@ -3080,32 +3080,26 @@ const STYLES = `
     to   { opacity: 1; }
   }
 
-  /* Active profile loaded banner — shows on basics step when a profile is selected */
-  .ps-bp-profile-loaded {
-    display: flex; align-items: center; justify-content: space-between;
-    gap: 12px;
-    padding: 10px 14px;
-    background: var(--ps-bg-secondary);
-    border: 1px solid var(--ps-border-subtle);
-    border-radius: 10px;
-    margin-bottom: 4px;
-  }
-  .ps-bp-profile-loaded-label {
-    font-size: 12px; color: var(--ps-text-secondary);
-    letter-spacing: 0.02em;
+  /* Minimal "Using <profile> · start fresh" hint above the first input */
+  .ps-bp-profile-hint {
+    margin: 0; padding: 0;
+    text-align: center;
+    font-size: 11px; font-weight: 400;
+    color: var(--ps-text-muted);
+    letter-spacing: 0.01em;
+    line-height: 1.4;
   }
-  .ps-bp-profile-loaded-label strong {
-    color: var(--ps-text-primary); font-weight: 700;
+  .ps-bp-profile-hint strong {
+    color: var(--ps-text-secondary); font-weight: 600;
   }
-  .ps-bp-profile-loaded-link {
+  .ps-bp-profile-hint-link {
     background: none; border: none;
-    color: var(--ps-accent);
-    font-family: inherit; font-size: 12px; font-weight: 700;
+    color: var(--ps-text-muted);
+    font-family: inherit; font-size: inherit; font-weight: 400;
     text-decoration: underline; text-underline-offset: 2px;
     cursor: pointer; padding: 0;
-    white-space: nowrap;
   }
-  .ps-bp-profile-loaded-link:hover { opacity: 0.85; }
+  .ps-bp-profile-hint-link:hover { color: var(--ps-text-secondary); }
 
   /* Typography */
   .ps-bp-title {
@@ -3467,10 +3461,10 @@ const STYLES = `
     flex: 1; min-height: 0;
   }
 
-  /* The dark viewfinder containing the photo + overlays */
+  /* Photo container — transparent, no scanner, no chrome */
   .ps-msc-viewfinder {
     position: relative; flex-shrink: 0;
-    background: #0E0F11; border-radius: 12px; overflow: hidden;
+    background: transparent; border-radius: 12px; overflow: hidden;
     height: 64vh; max-height: 540px; min-height: 360px;
     display: flex; align-items: center; justify-content: center;
   }
@@ -3478,7 +3472,6 @@ const STYLES = `
     max-width: 100%; max-height: 100%;
     width: auto; height: 100%;
     object-fit: contain; display: block;
-    filter: brightness(0.9) contrast(1.05);
   }
 
   /* Live feed badge top-left */
@@ -3654,13 +3647,10 @@ const STYLES = `
     background: var(--ps-bg-secondary);
     display: flex; align-items: center; justify-content: center;
   }
-  /* When showing the try-on result, give it a touch more presence */
-  .ps-msr-product-img-wrap.ps-tryon {
-    background: #0F0F10;
-  }
+  /* Try-on result keeps the same neutral background as the product hero —
+   *  no dark backdrop on mobile. */
   .ps-msr-product-img {
-    max-width: 100%; max-height: 100%;
-    width: auto; height: 100%;
+    width: 100%; height: 100%;
     object-fit: contain; display: block;
   }
   /* Show-Fit / mediapipe overlay toggle pill — bottom-left of try-on hero */
@@ -3821,6 +3811,12 @@ const STYLES = `
     letter-spacing: -0.01em;
     margin: 0 0 6px;
   }
+  /* Wrapper that vertically centers the cards in whatever space is left
+   *  between the title at the top and the bottom navigation. */
+  .ps-bsm-options-center {
+    flex: 1 1 auto; min-height: 0;
+    display: flex; flex-direction: column; justify-content: center;
+  }
   .ps-bsm-options {
     display: flex; flex-direction: column; gap: 12px;
   }
@@ -4867,8 +4863,7 @@ const STYLES = `
     flex-shrink: 0;
   }
   .ps-msd-image-img {
-    max-width: 100%; max-height: 100%;
-    width: auto; height: 100%;
+    width: 100%; height: 100%;
     object-fit: contain; display: block;
   }
 
@@ -6109,8 +6104,8 @@ function MobileSkeleton({ landmarks, w, h }) {
               y1: pa.y * h,
               x2: pb.x * w,
               y2: pb.y * h,
-              stroke: "rgba(255,255,255,0.85)",
-              strokeWidth: "3",
+              stroke: "rgba(100,210,255,0.9)",
+              strokeWidth: "4",
               strokeLinecap: "round",
               opacity: 0,
               style: { animation: `ps-msc-fade 0.4s ease ${i * 0.05}s forwards` }
@@ -6124,8 +6119,8 @@ function MobileSkeleton({ landmarks, w, h }) {
             {
               cx: v.x * w,
               cy: v.y * h,
-              r: 9,
-              fill: "rgba(255,255,255,0.18)",
+              r: 10,
+              fill: "rgba(100,210,255,0.25)",
               opacity: 0,
               style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards` }
             }
@@ -6135,8 +6130,8 @@ function MobileSkeleton({ landmarks, w, h }) {
             {
               cx: v.x * w,
               cy: v.y * h,
-              r: 5,
-              fill: "#FFFFFF",
+              r: 6,
+              fill: "rgba(100,210,255,0.95)",
               opacity: 0,
               style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards` }
             }
@@ -6175,30 +6170,19 @@ function MobileScanningView({
   };
   const [stageIdx, setStageIdx] = useState(0);
   useEffect(() => {
-    if (sizingDone) return;
+    const id = setInterval(() => {
+      setStageIdx((i) => (i + 1) % stages.length);
+    }, 1500);
+    return () => clearInterval(id);
+  }, [stages.length]);
+  useEffect(() => {
     if (isPhotoMode && bodyLandmarks && stageIdx === 0) {
       setStageIdx(1);
-      return;
     }
-    const id = setInterval(() => {
-      setStageIdx((i) => Math.min(i + 1, stages.length - 1));
-    }, 1600);
-    return () => clearInterval(id);
-  }, [bodyLandmarks, sizingDone, stageIdx, stages.length, isPhotoMode]);
+  }, [bodyLandmarks]);
   const current = stages[stageIdx] ?? stages[0];
-  const [feedTick, setFeedTick] = useState(1);
-  useEffect(() => {
-    if (sizingDone) return;
-    const id = setInterval(() => setFeedTick((n) => n + 1), 850);
-    return () => clearInterval(id);
-  }, [sizingDone]);
   return /* @__PURE__ */ jsxs("div", { className: "ps-msc-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-msc-viewfinder", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-msc-feed-badge", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msc-feed-dot" }),
-        "LIVE_FEED:",
-        String(feedTick).padStart(2, "0")
-      ] }),
       displayImage && /* @__PURE__ */ jsx(
         "img",
         {
@@ -6208,22 +6192,7 @@ function MobileScanningView({
           onLoad: handleImgLoad
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "ps-msc-corners", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-tl" }),
-        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-tr" }),
-        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-bl" }),
-        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-br" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "ps-msc-scanline" }),
-      isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-bottom", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-text", children: [
-          current.viewfinderText,
-          "..."
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-bar", children: /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-bar-fill" }) }),
-        /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-sub", children: t("PLEASE STAND STILL") })
-      ] })
+      isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
@@ -6511,6 +6480,15 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
     const delay = i * 0.35;
     const curvePath = `M ${x1} ${cy} Q ${midX} ${cy + curveDepth} ${x2} ${cy}`;
     const lineLen = width * 1.05;
+    const labelText = fitRow ? fitRow.fit === "good" ? "✓ Fit" : fitRow.fit.includes("tight") ? "Tight" : "Loose" : label;
+    const labelFont = Math.round(14 * scale);
+    const labelWidthEst = labelText.length * labelFont * 0.62;
+    const rightSpace = W - x2 - 12 * scale;
+    const flipLeft = rightSpace < labelWidthEst;
+    const labelX = flipLeft ? x1 - 10 * scale : x2 + 10 * scale;
+    const labelAnchor = flipLeft ? "end" : "start";
+    const tickX1 = flipLeft ? x1 : x2;
+    const tickX2 = flipLeft ? x1 - 6 * scale : x2 + 6 * scale;
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "path",
@@ -6551,9 +6529,9 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
         /* @__PURE__ */ jsx(
           "line",
           {
-            x1: x2,
+            x1: tickX1,
             y1: cy,
-            x2: x2 + 6 * scale,
+            x2: tickX2,
             y2: cy,
             stroke: color,
             strokeWidth: 2 * scale
@@ -6562,14 +6540,15 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
         /* @__PURE__ */ jsx(
           "text",
           {
-            x: x2 + 10 * scale,
+            x: labelX,
             y: cy + 1 * scale,
             fill: color,
-            fontSize: Math.round(14 * scale),
+            fontSize: labelFont,
             fontWeight: "700",
             fontFamily: "system-ui, -apple-system, sans-serif",
             dominantBaseline: "middle",
-            children: fitRow ? fitRow.fit === "good" ? "✓ Fit" : fitRow.fit.includes("tight") ? "Tight" : "Loose" : label
+            textAnchor: labelAnchor,
+            children: labelText
           }
         )
       ] })
@@ -7366,7 +7345,7 @@ function SizeResultView({
           {
             src: previewUrl || productImage,
             alt: productTitle,
-            className: `ps-tryon-sr-product-img${bodyLandmarks ? "" : " ps-tryon-blur"}`,
+            className: "ps-tryon-sr-product-img",
             onLoad: handleImgLoad
           }
         ),
@@ -7520,12 +7499,8 @@ function SizeResultView({
         /* ── Desktop section picker: split layout — image left, image cards right ── */
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2", children: [
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsx("img", { src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage, alt: productTitle, className: `ps-tryon-v2-bg-img${tryOnProcessing && !bodyLandmarks ? " ps-tryon-blur" : ""}`, onLoad: handleImgLoad }),
+            /* @__PURE__ */ jsx("img", { src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
             tryOnProcessing && bodyLandmarks && /* @__PURE__ */ jsx(SkeletonOverlay, { landmarks: bodyLandmarks, imgWidth: imgDims.w, imgHeight: imgDims.h }),
-            tryOnProcessing && !bodyLandmarks && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" }),
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-line" })
-            ] }),
             tryOnProcessing && /* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-processing-label", children: t("Generating try-on...") }),
             resultImageUrl && !tryOnProcessing && poseReady && poseLines && /* @__PURE__ */ jsx(MeasurementOverlay, { lines: poseLines, fitRows: (() => {
               const all = [...sizingResult?.matchDetails || []];
@@ -8968,18 +8943,19 @@ function BasicsStepMobile({
   const incAge = () => setAge(String(Math.min(ageMax, ageNum + 1)));
   const decAge = () => setAge(String(Math.max(ageMin, ageNum - 1)));
   return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-root", children: [
-    activeProfileName && /* @__PURE__ */ jsxs("div", { className: "ps-bp-profile-loaded", children: [
-      /* @__PURE__ */ jsxs("span", { className: "ps-bp-profile-loaded-label", children: [
-        t("Profile loaded"),
-        ": ",
-        /* @__PURE__ */ jsx("strong", { children: activeProfileName })
-      ] }),
-      onStartFresh && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bp-profile-loaded-link", onClick: onStartFresh, children: t("Start fresh AI sizing") })
-    ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-bpm-header", children: [
       /* @__PURE__ */ jsx("h2", { className: "ps-bpm-title", children: t("Let's find your best fit") }),
       /* @__PURE__ */ jsx("p", { className: "ps-bpm-subtitle", children: t("Enter your details for a bespoke size recommendation") })
     ] }),
+    activeProfileName && /* @__PURE__ */ jsxs("p", { className: "ps-bp-profile-hint", children: [
+      t("Using"),
+      " ",
+      /* @__PURE__ */ jsx("strong", { children: activeProfileName }),
+      onStartFresh && /* @__PURE__ */ jsxs(Fragment, { children: [
+        " · ",
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bp-profile-hint-link", onClick: onStartFresh, children: t("start fresh") })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-bpm-toggle", children: [
       /* @__PURE__ */ jsx(
         "button",
@@ -9262,7 +9238,7 @@ function BodyShapeStepMobile({
       String(totalSteps).padStart(2, "0")
     ] }),
     /* @__PURE__ */ jsx("h2", { className: "ps-bsm-question", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "ps-bsm-options", children: options.map((opt, idx) => {
+    /* @__PURE__ */ jsx("div", { className: "ps-bsm-options-center", children: /* @__PURE__ */ jsx("div", { className: "ps-bsm-options", children: options.map((opt, idx) => {
       const isActive = selected === opt.value;
       const profileLetter = String.fromCharCode(65 + idx);
       return /* @__PURE__ */ jsxs(
@@ -9285,7 +9261,7 @@ function BodyShapeStepMobile({
         },
         opt.value
       );
-    }) })
+    }) }) })
   ] });
 }
 function CameraUploadIcon() {
@@ -9813,15 +9789,16 @@ function BodyProfileView({
           );
         }
         return /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter", children: [
-          hasActiveProfileWithMeasurements && activeProfileName && /* @__PURE__ */ jsxs("div", { className: "ps-bp-profile-loaded", children: [
-            /* @__PURE__ */ jsxs("span", { className: "ps-bp-profile-loaded-label", children: [
-              t("Profile loaded"),
-              ": ",
-              /* @__PURE__ */ jsx("strong", { children: activeProfileName })
-            ] }),
-            onStartFresh && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bp-profile-loaded-link", onClick: onStartFresh, children: t("Start fresh AI sizing") })
-          ] }),
           /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Let's find your best fit") }),
+          hasActiveProfileWithMeasurements && activeProfileName && /* @__PURE__ */ jsxs("p", { className: "ps-bp-profile-hint", children: [
+            t("Using"),
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: activeProfileName }),
+            onStartFresh && /* @__PURE__ */ jsxs(Fragment, { children: [
+              " · ",
+              /* @__PURE__ */ jsx("button", { type: "button", className: "ps-bp-profile-hint-link", onClick: onStartFresh, children: t("start fresh") })
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: "ps-bp-system-toggle", children: [
             /* @__PURE__ */ jsx("button", { className: `ps-bp-system-btn${!isImperialMode ? " ps-bp-system-active" : ""}`, onClick: switchToMetric, type: "button", children: t("Metric") }),
             /* @__PURE__ */ jsx("button", { className: `ps-bp-system-btn${isImperialMode ? " ps-bp-system-active" : ""}`, onClick: switchToImperial, type: "button", children: t("Imperial") })