@primestyleai/tryon 5.6.15 → 5.6.17

package/dist/react/index.js

@@ -3080,6 +3080,27 @@ const STYLES = `
     to   { opacity: 1; }
   }
 
+  /* 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-hint strong {
+    color: var(--ps-text-secondary); font-weight: 600;
+  }
+  .ps-bp-profile-hint-link {
+    background: none; border: none;
+    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;
+  }
+  .ps-bp-profile-hint-link:hover { color: var(--ps-text-secondary); }
+
   /* Typography */
   .ps-bp-title {
     font-size: 1.25vw; font-weight: 700; color: var(--ps-text-primary);
@@ -3440,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;
   }
@@ -3451,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 */
@@ -6082,8 +6102,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` }
@@ -6097,8 +6117,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` }
             }
@@ -6108,8 +6128,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` }
             }
@@ -6167,11 +6187,6 @@ function MobileScanningView({
   }, [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",
         {
@@ -6181,22 +6196,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 }),
@@ -7339,7 +7339,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
           }
         ),
@@ -7493,12 +7493,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 || []];
@@ -8903,6 +8899,8 @@ function BasicsStepMobile({
   onNext,
   canProceed,
   fastPathLabel,
+  activeProfileName,
+  onStartFresh,
   error,
   t
 }) {
@@ -8943,6 +8941,15 @@ function BasicsStepMobile({
       /* @__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",
@@ -9351,6 +9358,8 @@ function BodyProfileView({
   onSnapSubmit,
   hasActiveProfileWithMeasurements = false,
   onUseActiveProfile,
+  activeProfileName,
+  onStartFresh,
   onBack,
   t
 }) {
@@ -9765,6 +9774,8 @@ function BodyProfileView({
               onNext: hasActiveProfileWithMeasurements && onUseActiveProfile ? onUseActiveProfile : handleNext,
               canProceed: true,
               fastPathLabel: hasActiveProfileWithMeasurements ? t("Find My Best Fit") : void 0,
+              activeProfileName: hasActiveProfileWithMeasurements ? activeProfileName : null,
+              onStartFresh,
               error,
               t
             },
@@ -9773,6 +9784,15 @@ function BodyProfileView({
         }
         return /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter", children: [
           /* @__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") })
@@ -11157,6 +11177,14 @@ function PrimeStyleTryonInner({
               return !!(p && p.measurements && Object.keys(p.measurements).length > 0);
             })(),
             onUseActiveProfile: handleUseActiveProfile,
+            activeProfileName: (() => {
+              const p = profiles.find((x) => x.id === activeProfileId);
+              return p?.name || null;
+            })(),
+            onStartFresh: () => {
+              setActiveProfileId$1(null);
+              formRef.current = {};
+            },
             onComplete: (data) => {
               formRef.current.gender = data.gender;
               if (data.bandSize) formRef.current.bandSize = data.bandSize;