@primestyleai/tryon 5.6.14 → 5.6.16

package/dist/react/index.js

@@ -3080,6 +3080,33 @@ 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;
+  }
+  .ps-bp-profile-loaded-label strong {
+    color: var(--ps-text-primary); font-weight: 700;
+  }
+  .ps-bp-profile-loaded-link {
+    background: none; border: none;
+    color: var(--ps-accent);
+    font-family: inherit; font-size: 12px; font-weight: 700;
+    text-decoration: underline; text-underline-offset: 2px;
+    cursor: pointer; padding: 0;
+    white-space: nowrap;
+  }
+  .ps-bp-profile-loaded-link:hover { opacity: 0.85; }
+
   /* Typography */
   .ps-bp-title {
     font-size: 1.25vw; font-weight: 700; color: var(--ps-text-primary);
@@ -3337,7 +3364,8 @@ const STYLES = `
     object-fit: contain; display: block;
   }
   .ps-pm-preview-empty {
-    display: flex; flex-direction: column; align-items: center;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
     gap: 6px; padding: 24px;
     background: none; border: none;
     color: var(--ps-text-muted); cursor: pointer;
@@ -3621,16 +3649,53 @@ const STYLES = `
   }
   .ps-msr-product-img-wrap {
     position: relative; flex-shrink: 0;
-    width: 220px; height: 220px;
+    width: 100%; max-width: 360px; height: 420px;
     border-radius: 12px; overflow: hidden;
     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;
+  }
   .ps-msr-product-img {
     max-width: 100%; max-height: 100%;
     width: auto; height: 100%;
     object-fit: contain; display: block;
   }
+  /* Show-Fit / mediapipe overlay toggle pill — bottom-left of try-on hero */
+  .ps-msr-fit-toggle {
+    position: absolute; bottom: 10px; left: 10px;
+    display: flex; align-items: center; gap: 6px;
+    padding: 8px 12px;
+    background: rgba(255,255,255,0.92);
+    color: var(--ps-text-primary);
+    border: none; border-radius: 999px;
+    font-family: inherit; font-size: 11px; font-weight: 700;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    z-index: 2;
+  }
+  .ps-msr-fit-toggle:active { transform: scale(0.97); }
+  .ps-msr-fit-toggle[aria-pressed="true"] {
+    background: var(--ps-accent); color: #FFFFFF;
+  }
+  /* Bottom action row when try-on finished — Try Again + Continue Shopping */
+  .ps-msr-bottom-row {
+    display: flex; gap: 10px; align-items: stretch;
+  }
+  .ps-msr-bottom-row .ps-msr-tryon-cta { flex: 1; }
+  .ps-msr-tryon-cta.ps-secondary {
+    background: transparent;
+    color: var(--ps-text-primary);
+    border: 1.5px solid var(--ps-border-color);
+  }
+  .ps-msr-tryon-cta.ps-secondary:active {
+    background: var(--ps-bg-secondary);
+  }
   .ps-msr-bookmark {
     position: absolute; top: 10px; right: 10px;
     width: 30px; height: 30px; border-radius: 7px;
@@ -4793,9 +4858,9 @@ const STYLES = `
     .ps-pmv-actions-right { flex-wrap: wrap; }
   }
 
-  /* Big product image */
+  /* Big product / try-on image */
   .ps-msd-image {
-    width: 100%; height: 240px;
+    width: 100%; height: 420px;
     border-radius: 12px; overflow: hidden;
     background: var(--ps-bg-secondary);
     display: flex; align-items: center; justify-content: center;
@@ -6186,6 +6251,14 @@ function CameraIcon() {
 function BookmarkIcon() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: /* @__PURE__ */ jsx("path", { d: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" }) });
 }
+function FitLinesIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
+    /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
+    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "17", cy: "15", r: "2" })
+  ] });
+}
 function MultiSectionMobile({
   productImage,
   productTitle,
@@ -6195,6 +6268,14 @@ function MultiSectionMobile({
   onSelectSection,
   onTryOn,
   tryOnProcessing,
+  resultImageUrl,
+  tryOnDone,
+  onTryAgain,
+  onClose,
+  overlayNode,
+  showLines,
+  onToggleLines,
+  onImageLoad,
   t
 }) {
   const matchPct = useMemo(() => {
@@ -6215,13 +6296,37 @@ function MultiSectionMobile({
     if (sizingResult?.confidence === "medium") return 84;
     return 72;
   }, [sizingResult]);
+  const heroImage = resultImageUrl || productImage;
+  const showingTryOn = !!resultImageUrl;
   return /* @__PURE__ */ jsxs("div", { className: "ps-msr-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-msr-scroll", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-msr-eyebrow", children: t("Sizing Profile") }),
       /* @__PURE__ */ jsxs("div", { className: "ps-msr-product", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-msr-product-img-wrap", children: [
-          /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-msr-product-img" }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msr-bookmark", "aria-label": t("Save"), children: /* @__PURE__ */ jsx(BookmarkIcon, {}) })
+        /* @__PURE__ */ jsxs("div", { className: `ps-msr-product-img-wrap${showingTryOn ? " ps-tryon" : ""}`, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: heroImage,
+              alt: productTitle,
+              className: "ps-msr-product-img",
+              onLoad: onImageLoad
+            }
+          ),
+          showLines && overlayNode,
+          !showingTryOn && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msr-bookmark", "aria-label": t("Save"), children: /* @__PURE__ */ jsx(BookmarkIcon, {}) }),
+          showingTryOn && onToggleLines && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ps-msr-fit-toggle",
+              onClick: onToggleLines,
+              "aria-pressed": !!showLines,
+              children: [
+                /* @__PURE__ */ jsx(FitLinesIcon, {}),
+                showLines ? t("Hide Fit") : t("Show Fit")
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ jsx("h2", { className: "ps-msr-product-name", children: productTitle })
       ] }),
@@ -6270,7 +6375,26 @@ function MultiSectionMobile({
         );
       }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msr-bottom", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: "ps-msr-bottom", children: tryOnDone ? /* @__PURE__ */ jsxs("div", { className: "ps-msr-bottom-row", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-msr-tryon-cta ps-secondary",
+          onClick: onTryAgain,
+          children: t("Try Again")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-msr-tryon-cta",
+          onClick: onClose,
+          children: t("Continue Shopping")
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
@@ -6498,7 +6622,12 @@ function SectionDetailView({
   t,
   productImage,
   productTitle,
-  isMobile: isMobileProp
+  isMobile: isMobileProp,
+  isTryOnImage,
+  showLines,
+  onToggleLines,
+  overlayNode,
+  onImageLoad
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = useState(null);
@@ -6706,7 +6835,36 @@ function SectionDetailView({
         ] }),
         /* @__PURE__ */ jsx("span", { className: "ps-msd-topbar-spacer" })
       ] }),
-      productImage && /* @__PURE__ */ jsx("div", { className: "ps-msd-image", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle || "", className: "ps-msd-image-img" }) }),
+      productImage && /* @__PURE__ */ jsxs("div", { className: `ps-msd-image${isTryOnImage ? " ps-tryon" : ""}`, children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: productImage,
+            alt: productTitle || "",
+            className: "ps-msd-image-img",
+            onLoad: onImageLoad
+          }
+        ),
+        showLines && overlayNode,
+        isTryOnImage && onToggleLines && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ps-msr-fit-toggle",
+            onClick: onToggleLines,
+            "aria-pressed": !!showLines,
+            children: [
+              /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "4", y1: "9", x2: "20", y2: "9" }),
+                /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" }),
+                /* @__PURE__ */ jsx("circle", { cx: "7", cy: "9", r: "2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "17", cy: "15", r: "2" })
+              ] }),
+              showLines ? t("Hide Fit") : t("Show Fit")
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-msd-card", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: displaySize === backendSize ? t("RECOMMENDED SIZE") : t("TRYING SIZE") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-msd-card-size-row", children: [
@@ -6964,6 +7122,8 @@ function SizeResultView({
   estimationDone = false,
   activeSection,
   setActiveSection,
+  onResetTryOn,
+  onClose,
   t
 }) {
   const unitLbl = sizingUnit === "cm" ? t("cm") : t("in");
@@ -7253,6 +7413,34 @@ function SizeResultView({
                 productImage: resultImageUrl || productImage,
                 productTitle,
                 isMobile: true,
+                isTryOnImage: !!resultImageUrl,
+                showLines,
+                onToggleLines: () => setShowLines(!showLines),
+                onImageLoad: handleImgLoad,
+                overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsx(
+                  MeasurementOverlay,
+                  {
+                    lines: poseLines,
+                    fitRows: (() => {
+                      const all = [...sizingResult?.matchDetails || []];
+                      if (sizingResult?.sections) {
+                        for (const sec of Object.values(sizingResult.sections)) {
+                          if (sec.matchDetails) all.push(...sec.matchDetails);
+                        }
+                      }
+                      const seen = /* @__PURE__ */ new Set();
+                      return all.filter((m) => {
+                        const k = m.measurement.toLowerCase();
+                        if (seen.has(k)) return false;
+                        seen.add(k);
+                        return true;
+                      }).map((m) => ({ area: m.measurement, userNum: parseFloat(m.userValue) || 0, chartLabel: m.chartRange || "", fit: m.fit }));
+                    })(),
+                    show: showLines,
+                    imgWidth: imgDims.w,
+                    imgHeight: imgDims.h
+                  }
+                ) : null,
                 t
               }
             );
@@ -7290,6 +7478,41 @@ function SizeResultView({
               setShowPhotoGuide(true);
             },
             tryOnProcessing,
+            resultImageUrl,
+            tryOnDone: !!resultImageUrl && !tryOnProcessing,
+            onTryAgain: () => {
+              onResetTryOn?.();
+              setGuideFile(null);
+              setShowPhotoGuide(true);
+            },
+            onClose,
+            showLines,
+            onToggleLines: () => setShowLines(!showLines),
+            onImageLoad: handleImgLoad,
+            overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsx(
+              MeasurementOverlay,
+              {
+                lines: poseLines,
+                fitRows: (() => {
+                  const all = [...sizingResult?.matchDetails || []];
+                  if (sizingResult?.sections) {
+                    for (const sec of Object.values(sizingResult.sections)) {
+                      if (sec.matchDetails) all.push(...sec.matchDetails);
+                    }
+                  }
+                  const seen = /* @__PURE__ */ new Set();
+                  return all.filter((m) => {
+                    const k = m.measurement.toLowerCase();
+                    if (seen.has(k)) return false;
+                    seen.add(k);
+                    return true;
+                  }).map((m) => ({ area: m.measurement, userNum: parseFloat(m.userValue) || 0, chartLabel: m.chartRange || "", fit: m.fit }));
+                })(),
+                show: showLines,
+                imgWidth: imgDims.w,
+                imgHeight: imgDims.h
+              }
+            ) : null,
             t
           }
         )
@@ -8575,25 +8798,6 @@ function CreateProfileCard({ onClick, t }) {
     /* @__PURE__ */ jsx("div", { className: "ps-msp-create-sub", children: t("ADD MEASUREMENTS & PHOTO") })
   ] });
 }
-function SizeHistoryCard({ entry, profileName, t }) {
-  const date = new Date(entry.savedAt).toLocaleDateString(void 0, { month: "short", day: "numeric" });
-  return /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-card", children: [
-    entry.productImage && /* @__PURE__ */ jsx("div", { className: "ps-msp-history-thumb", children: /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: entry.productTitle }) }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-info", children: [
-      /* @__PURE__ */ jsx("div", { className: "ps-msp-history-name", children: entry.productTitle }),
-      profileName && /* @__PURE__ */ jsx("div", { className: "ps-msp-history-profile", children: profileName }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-meta", children: [
-        /* @__PURE__ */ jsx(ClockIcon, { size: 11 }),
-        " ",
-        date
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-size", children: [
-      /* @__PURE__ */ jsx("span", { className: "ps-msp-history-size-label", children: t("SIZE") }),
-      /* @__PURE__ */ jsx("span", { className: "ps-msp-history-size-value", children: entry.recommendedSize })
-    ] })
-  ] });
-}
 function MySizingProfilesView({
   profiles,
   activeProfileId,
@@ -8608,15 +8812,6 @@ function MySizingProfilesView({
   const [creating, setCreating] = useState(false);
   const [viewingId, setViewingId] = useState(null);
   const viewingProfile = viewingId ? profiles.find((p) => p.id === viewingId) || null : null;
-  const allHistory = useMemo(() => {
-    const items = [];
-    for (const p of profiles) {
-      for (const h of p.sizeHistory || []) {
-        items.push({ entry: h, profileName: p.name });
-      }
-    }
-    return items.sort((a, b) => b.entry.savedAt - a.entry.savedAt).slice(0, 12);
-  }, [profiles]);
   const handleSaveNewProfile = (data) => {
     onSaveNewProfile(data);
     setCreating(false);
@@ -8687,10 +8882,6 @@ function MySizingProfilesView({
         },
         p.id
       ))
-    ] }),
-    allHistory.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-section", children: [
-      /* @__PURE__ */ jsx("h3", { className: "ps-msp-history-title", children: t("Recent Size Calculations") }),
-      /* @__PURE__ */ jsx("div", { className: "ps-msp-history-list", children: allHistory.map(({ entry, profileName }) => /* @__PURE__ */ jsx(SizeHistoryCard, { entry, profileName, t }, `${entry.productId}-${entry.savedAt}`)) })
     ] })
   ] }) }) });
 }
@@ -8739,6 +8930,8 @@ function BasicsStepMobile({
   onNext,
   canProceed,
   fastPathLabel,
+  activeProfileName,
+  onStartFresh,
   error,
   t
 }) {
@@ -8775,6 +8968,14 @@ 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") })
@@ -9187,6 +9388,8 @@ function BodyProfileView({
   onSnapSubmit,
   hasActiveProfileWithMeasurements = false,
   onUseActiveProfile,
+  activeProfileName,
+  onStartFresh,
   onBack,
   t
 }) {
@@ -9601,6 +9804,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
             },
@@ -9608,6 +9813,14 @@ 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") }),
           /* @__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") }),
@@ -10993,6 +11206,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;
@@ -11065,6 +11286,13 @@ function PrimeStyleTryonInner({
             bodyLandmarks,
             activeSection,
             setActiveSection,
+            onResetTryOn: () => {
+              setSelectedFile(null);
+              if (previewUrl) URL.revokeObjectURL(previewUrl);
+              setPreviewUrl(null);
+              setResultImageUrl(null);
+            },
+            onClose: handleClose,
             t
           }
         ) }, "v-sizeresult");