@primestyleai/tryon 5.6.16 → 5.6.17

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 */
@@ -6109,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` }
@@ -6124,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` }
             }
@@ -6135,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` }
             }
@@ -6194,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",
         {
@@ -6208,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 }),
@@ -7366,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
           }
         ),
@@ -7520,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 || []];
@@ -8968,18 +8937,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",
@@ -9813,15 +9783,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") })