@primestyleai/tryon 5.6.13 → 5.6.15

package/dist/react/index.js

@@ -3337,7 +3337,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 +3622,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 +4831,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 +6224,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 +6241,14 @@ function MultiSectionMobile({
   onSelectSection,
   onTryOn,
   tryOnProcessing,
+  resultImageUrl,
+  tryOnDone,
+  onTryAgain,
+  onClose,
+  overlayNode,
+  showLines,
+  onToggleLines,
+  onImageLoad,
   t
 }) {
   const matchPct = useMemo(() => {
@@ -6215,13 +6269,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 +6348,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 +6595,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 +6808,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 +7095,8 @@ function SizeResultView({
   estimationDone = false,
   activeSection,
   setActiveSection,
+  onResetTryOn,
+  onClose,
   t
 }) {
   const unitLbl = sizingUnit === "cm" ? t("cm") : t("in");
@@ -7253,6 +7386,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 +7451,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
           }
         )
@@ -7551,7 +7747,112 @@ function SizeResultView({
           ] })
         ] })
       ),
-      showPhotoGuide && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", padding: "1.5vw", width: "100%", height: "100%", background: "var(--ps-bg-primary)", borderRadius: "0.8vw", overflow: "hidden" }, children: [
+      showPhotoGuide && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
+        /* ── Mobile: same layout as the AI-sizing photo step
+           (PhotoStepMobile) — title + subtitle, large preview,
+           checklist card, primary CTA + RETAKE secondary. ── */
+        /* @__PURE__ */ jsx("div", { className: "ps-bp-wrapper", style: { padding: "16px 16px 0", background: "var(--ps-bg-primary)" }, children: /* @__PURE__ */ jsxs("div", { className: "ps-pm-root", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-pm-header", children: [
+            /* @__PURE__ */ jsx("h2", { className: "ps-pm-title", children: t("Review your photo") }),
+            /* @__PURE__ */ jsx("p", { className: "ps-pm-subtitle", children: t("Ensure your full body is visible for the most accurate virtual try-on.") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: guideInputRef,
+              type: "file",
+              accept: "image/jpeg,image/png,image/webp",
+              style: { display: "none" },
+              onChange: (e) => {
+                const f = e.target.files?.[0];
+                if (f) setGuideFile(f);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "ps-pm-preview", children: guideFile && guidePreviewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("img", { src: guidePreviewUrl, alt: t("Your photo"), className: "ps-pm-preview-img" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ps-pm-preview-remove",
+                onClick: () => setGuideFile(null),
+                "aria-label": t("Remove photo"),
+                children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ps-pm-preview-empty",
+              onClick: () => guideInputRef.current?.click(),
+              children: [
+                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "32", height: "32", 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-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("div", { className: "ps-pm-checklist", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }) }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-pm-checklist-body", children: [
+              /* @__PURE__ */ jsx("div", { className: "ps-pm-checklist-title", children: t("Checklist for accuracy") }),
+              /* @__PURE__ */ jsxs("ul", { className: "ps-pm-checklist-items", children: [
+                /* @__PURE__ */ jsx("li", { children: t("Form-fitting clothing is recommended") }),
+                /* @__PURE__ */ jsx("li", { children: t("Standing 2-3 meters from camera") }),
+                /* @__PURE__ */ jsx("li", { children: t("Neutral background with good lighting") })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ps-pm-primary-btn",
+                disabled: !guideFile,
+                onClick: () => {
+                  if (!guideFile) return;
+                  handleFileSelect(guideFile);
+                  handleTryOnSubmit();
+                  setShowPhotoGuide(false);
+                  setGuideFile(null);
+                },
+                children: t("START TRY-ON")
+              }
+            ),
+            guideFile ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ps-pm-secondary-btn",
+                onClick: () => guideInputRef.current?.click(),
+                children: t("RETAKE PHOTO")
+              }
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ps-pm-secondary-btn",
+                onClick: () => {
+                  setShowPhotoGuide(false);
+                  setGuideFile(null);
+                },
+                children: t("BACK")
+              }
+            )
+          ] })
+        ] }) })
+      ) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", padding: "1.5vw", width: "100%", height: "100%", background: "var(--ps-bg-primary)", borderRadius: "0.8vw", overflow: "hidden" }, children: [
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1.2vw", flex: 1, alignItems: "stretch", minHeight: 0, overflow: "hidden" }, children: [
           /* @__PURE__ */ jsxs(
             "div",
@@ -8470,25 +8771,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,
@@ -8503,15 +8785,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);
@@ -8582,10 +8855,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}`)) })
     ] })
   ] }) }) });
 }
@@ -10960,6 +11229,13 @@ function PrimeStyleTryonInner({
             bodyLandmarks,
             activeSection,
             setActiveSection,
+            onResetTryOn: () => {
+              setSelectedFile(null);
+              if (previewUrl) URL.revokeObjectURL(previewUrl);
+              setPreviewUrl(null);
+              setResultImageUrl(null);
+            },
+            onClose: handleClose,
             t
           }
         ) }, "v-sizeresult");