@primestyleai/tryon 5.5.18 → 5.5.20

package/dist/react/index.js

@@ -3366,7 +3366,11 @@ const STYLES = `
   .ps-msr-root {
     display: flex; flex-direction: column;
     gap: 14px; padding: 4px 4px 100px;
-    /* No flex:1 — let content size naturally so the modal can scroll */
+    /* Fill the modal body and create a self-scrolling region — the
+       outer .ps-bp-root flex chain doesn't propagate scroll past the
+       child level on mobile, so we own scrolling here. */
+    height: 100%; min-height: 0;
+    overflow-y: auto; -webkit-overflow-scrolling: touch;
   }
   .ps-msr-eyebrow {
     font-size: 10px; font-weight: 600;
@@ -3375,15 +3379,15 @@ const STYLES = `
     text-align: center; margin: 4px 0 -4px;
   }
 
-  /* Product hero — centered image + title */
+  /* Product hero — big centered image + title */
   .ps-msr-product {
     display: flex; flex-direction: column; align-items: center;
-    gap: 10px;
+    gap: 14px;
   }
   .ps-msr-product-img-wrap {
     position: relative; flex-shrink: 0;
-    width: 130px; height: 130px;
-    border-radius: 10px; overflow: hidden;
+    width: 220px; height: 220px;
+    border-radius: 12px; overflow: hidden;
     background: var(--ps-bg-secondary);
     display: flex; align-items: center; justify-content: center;
   }
@@ -3393,18 +3397,18 @@ const STYLES = `
     object-fit: contain; display: block;
   }
   .ps-msr-bookmark {
-    position: absolute; top: 8px; right: 8px;
-    width: 26px; height: 26px; border-radius: 6px;
+    position: absolute; top: 10px; right: 10px;
+    width: 30px; height: 30px; border-radius: 7px;
     background: rgba(255,255,255,0.92); border: none;
     color: var(--ps-text-primary); cursor: pointer;
     display: flex; align-items: center; justify-content: center;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12);
   }
   .ps-msr-product-name {
-    font-size: 17px; font-weight: 700;
+    font-size: 19px; font-weight: 700;
     color: var(--ps-text-primary);
     text-align: center; margin: 0;
-    letter-spacing: -0.005em;
+    letter-spacing: -0.01em;
   }
 
   /* Match badge row */
@@ -3437,48 +3441,37 @@ const STYLES = `
     color: var(--ps-text-muted);
   }
 
-  /* Section cards — stacked, full-width, white bg with subtle border,
-     tappable. Modal scrolls if there are many of them. */
+  /* Section cards — TALL, label small on top, BIG centered size value */
   .ps-msr-sections {
-    display: flex; flex-direction: column; gap: 10px;
-    margin-top: 6px;
+    display: flex; flex-direction: column;
+    margin-top: 8px;
+    border-top: 1px solid var(--ps-border-subtle);
   }
   .ps-msr-section-card {
-    display: flex; align-items: center; justify-content: space-between;
-    background: var(--ps-bg-primary);
-    border: 1px solid var(--ps-border-subtle);
-    border-radius: 12px;
-    padding: 18px 20px;
+    display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    gap: 14px;
+    background: none; border: none;
+    border-bottom: 1px solid var(--ps-border-subtle);
+    padding: 28px 20px;
     font-family: inherit; cursor: pointer;
-    text-align: left; width: 100%;
-    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-  }
-  .ps-msr-section-card:hover {
-    border-color: var(--ps-accent);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
-  }
-  .ps-msr-section-card:active { transform: scale(0.985); }
-  .ps-msr-section-text {
-    display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
+    width: 100%;
+    transition: background 0.15s, transform 0.15s;
   }
+  .ps-msr-section-card:active { transform: scale(0.99); background: var(--ps-bg-secondary); }
   .ps-msr-section-name {
-    font-size: 11px; font-weight: 700;
-    letter-spacing: 0.1em; text-transform: uppercase;
-    color: var(--ps-text-secondary);
-  }
-  .ps-msr-section-rec {
-    font-size: 10px; font-weight: 500;
-    letter-spacing: 0.04em;
+    font-size: 11px; font-weight: 600;
+    letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-muted);
+    text-align: center;
   }
   .ps-msr-section-size {
-    font-size: 28px; font-weight: 700;
+    font-size: 56px; font-weight: 700;
     color: var(--ps-text-primary);
     font-feature-settings: "tnum" 1;
     line-height: 1;
-    flex-shrink: 0;
-    margin-left: 16px;
+    text-align: center;
+    letter-spacing: -0.01em;
   }
 
   /* Bottom CTA: sticky to the modal bottom so it's always accessible
@@ -3507,6 +3500,178 @@ const STYLES = `
   .ps-msr-tryon-cta:disabled { opacity: 0.4; cursor: not-allowed; }
   .ps-msr-tryon-cta svg { flex-shrink: 0; }
 
+  /* ════════════════════════════════════════════════════════════════
+     MobileSectionDetail (.ps-msd-*) — section detail view on mobile.
+     Big product image, big size value, match%, MEASUREMENT BLUEPRINT
+     rows with PERFECT FIT badges, TRY ANOTHER SIZE picker.
+     Self-scrolling — content can be long.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-msd-root {
+    display: flex; flex-direction: column;
+    gap: 14px; padding: 4px 4px 60px;
+    height: 100%; min-height: 0;
+    overflow-y: auto; -webkit-overflow-scrolling: touch;
+  }
+  .ps-msd-back {
+    background: none; border: none;
+    color: var(--ps-text-secondary);
+    font-family: inherit; font-size: 12px; font-weight: 500;
+    padding: 6px 0; margin-bottom: 4px;
+    cursor: pointer; align-self: flex-start;
+    display: flex; align-items: center; gap: 6px;
+    transition: color 0.15s;
+  }
+  .ps-msd-back:hover { color: var(--ps-text-primary); }
+  .ps-msd-back-arrow { font-size: 16px; line-height: 1; }
+
+  /* Big product image */
+  .ps-msd-image {
+    width: 100%; height: 240px;
+    border-radius: 12px; overflow: hidden;
+    background: var(--ps-bg-secondary);
+    display: flex; align-items: center; justify-content: center;
+    flex-shrink: 0;
+  }
+  .ps-msd-image-img {
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain; display: block;
+  }
+
+  /* Header: section name + big size + match */
+  .ps-msd-header {
+    display: flex; flex-direction: column; align-items: center;
+    gap: 6px; padding: 14px 0 18px;
+    border-bottom: 1px solid var(--ps-border-subtle);
+  }
+  .ps-msd-section-name {
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-msd-size-row {
+    display: flex; align-items: baseline; gap: 8px;
+  }
+  .ps-msd-size-num {
+    font-size: 64px; font-weight: 700;
+    color: var(--ps-text-primary);
+    line-height: 1; letter-spacing: -0.02em;
+    font-feature-settings: "tnum" 1;
+  }
+  .ps-msd-size-len {
+    font-size: 16px; font-weight: 500;
+    color: var(--ps-text-secondary);
+  }
+  .ps-msd-match {
+    display: flex; align-items: baseline; gap: 5px;
+  }
+  .ps-msd-match-pct {
+    font-size: 13px; font-weight: 700;
+    color: var(--ps-accent);
+    font-feature-settings: "tnum" 1;
+  }
+  .ps-msd-match-label {
+    font-size: 10px; font-weight: 600;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+
+  /* MEASUREMENT BLUEPRINT */
+  .ps-msd-blueprint {
+    display: flex; flex-direction: column; gap: 8px;
+    padding-top: 16px;
+  }
+  .ps-msd-blueprint-title {
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+    text-align: center; margin-bottom: 4px;
+  }
+  .ps-msd-rows {
+    display: flex; flex-direction: column;
+  }
+  .ps-msd-row {
+    padding: 16px 4px;
+    border-bottom: 1px solid var(--ps-border-subtle);
+  }
+  .ps-msd-row:last-child { border-bottom: none; }
+  .ps-msd-row-top {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  .ps-msd-row-label {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-msd-row-badge {
+    font-size: 9px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    padding: 4px 9px; border-radius: 999px;
+  }
+  .ps-msd-row-badge.ps-good {
+    background: rgba(33, 84, 239, 0.1);
+    color: var(--ps-accent);
+  }
+  .ps-msd-row-badge.ps-tight {
+    background: rgba(220, 38, 38, 0.1);
+    color: #dc2626;
+  }
+  .ps-msd-row-badge.ps-loose {
+    background: rgba(217, 119, 6, 0.1);
+    color: #d97706;
+  }
+  .ps-msd-row-values {
+    display: flex; gap: 16px;
+  }
+  .ps-msd-row-cell {
+    flex: 1; display: flex; flex-direction: column; gap: 3px;
+  }
+  .ps-msd-cell-label {
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-msd-cell-value {
+    font-size: 16px; font-weight: 600;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+  }
+
+  /* TRY ANOTHER SIZE picker */
+  .ps-msd-sizes {
+    display: flex; flex-direction: column; gap: 10px;
+    padding-top: 18px;
+  }
+  .ps-msd-sizes-label {
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+    text-align: center;
+  }
+  .ps-msd-sizes-pills {
+    display: flex; flex-wrap: wrap; gap: 8px;
+    justify-content: center;
+  }
+  .ps-msd-size-pill {
+    min-width: 48px;
+    padding: 10px 16px;
+    background: transparent;
+    border: 1.5px solid var(--ps-border-color);
+    border-radius: 8px;
+    font-family: inherit; font-size: 13px; font-weight: 600;
+    color: var(--ps-text-primary);
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+  .ps-msd-size-pill:hover {
+    border-color: var(--ps-accent);
+  }
+  .ps-msd-size-pill.ps-active {
+    background: var(--ps-accent); color: #FFFFFF;
+    border-color: var(--ps-accent);
+  }
+
   /* Bottom action area — Next button + tab bar grouped together,
      pushed to the bottom of the modal body by .ps-bpm-spacer above. */
   .ps-bpm-bottom {
@@ -4785,10 +4950,7 @@ function MultiSectionMobile({
           className: "ps-msr-section-card",
           onClick: () => onSelectSection(name),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "ps-msr-section-text", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-msr-section-name", children: cleanName.toUpperCase() }),
-              /* @__PURE__ */ jsx("span", { className: "ps-msr-section-rec", children: t("recommended size") })
-            ] }),
+            /* @__PURE__ */ jsx("span", { className: "ps-msr-section-name", children: cleanName.toUpperCase() }),
             /* @__PURE__ */ jsx("span", { className: "ps-msr-section-size", children: sizeValue })
           ]
         },
@@ -5020,7 +5182,10 @@ function SectionDetailView({
   unitLbl,
   lengthEntry,
   onBack,
-  t
+  t,
+  productImage,
+  productTitle,
+  isMobile: isMobileProp
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = useState(null);
@@ -5177,6 +5342,90 @@ function SectionDetailView({
   const backendAvailableLengths = secAny?.availableLengths || [];
   const finalDisplayLength = selectedLength || backendLength;
   const finalAllSizes = backendAvailableSizes.length > 0 ? backendAvailableSizes : allSizes;
+  if (isMobileProp) {
+    const cleanSectionName = sectionName.replace(/\s*[—–-]\s*.*/g, "");
+    const fitBadgeLabel = (fit) => fit === "good" ? t("PERFECT FIT") : fit.includes("a-bit-tight") ? t("SLIGHTLY TIGHT") : fit.includes("a-bit-loose") ? t("SLIGHTLY LOOSE") : fit.includes("tight") ? t("TIGHT") : fit.includes("loose") ? t("LOOSE") : t("FIT");
+    return /* @__PURE__ */ jsxs("div", { className: "ps-msd-root", children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-msd-back", onClick: onBack, children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-back-arrow", children: "←" }),
+        " ",
+        t("Back to sections")
+      ] }),
+      productImage && /* @__PURE__ */ jsx("div", { className: "ps-msd-image", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle || "", className: "ps-msd-image-img" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msd-header", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-section-name", children: cleanSectionName.toUpperCase() }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msd-size-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "ps-msd-size-num", children: backendSize }),
+          finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-size-len", children: finalDisplayLength })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msd-match", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ps-msd-match-pct", children: [
+            matchPercent,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "ps-msd-match-label", children: t("FIT MATCH") })
+        ] })
+      ] }),
+      fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-blueprint", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-blueprint-title", children: t("MEASUREMENT BLUEPRINT") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-rows", children: fitRows.map((row, i) => {
+          const fitClass = row.fit === "good" ? "ps-good" : row.fit.includes("tight") ? "ps-tight" : "ps-loose";
+          return /* @__PURE__ */ jsxs("div", { className: "ps-msd-row", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-top", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-msd-row-label", children: row.area.toUpperCase() }),
+              /* @__PURE__ */ jsx("span", { className: `ps-msd-row-badge ${fitClass}`, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitBadgeLabel(row.fit) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-values", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("YOU") }),
+                /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-value", children: [
+                  row.userNum,
+                  " ",
+                  unitLbl
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("GARMENT") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: row.chartLabel })
+              ] })
+            ] })
+          ] }, i);
+        }) })
+      ] }),
+      finalAllSizes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-sizes-label", children: t("TRY ANOTHER SIZE") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: finalAllSizes.map((s) => {
+          const isActive = s === displaySize;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `ps-msd-size-pill${isActive ? " ps-active" : ""}`,
+              onClick: () => setSelectedSize(s === recSize ? null : s),
+              children: s
+            },
+            s
+          );
+        }) })
+      ] }),
+      (backendAvailableLengths.length > 0 || lengthSizes.length > 0) && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-sizes-label", children: t("LENGTH ADJUSTMENT") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: (backendAvailableLengths.length > 0 ? backendAvailableLengths : lengthSizes).map((s) => {
+          const isActive = finalDisplayLength === s;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `ps-msd-size-pill${isActive ? " ps-active" : ""}`,
+              onClick: () => setSelectedLength(s === backendLength ? null : s),
+              children: s
+            },
+            s
+          );
+        }) })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-detail", style: { padding: "1.5vw", display: "flex", flexDirection: "column", height: "100%", background: "#F8F9FA" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75vw", fontWeight: 700, color: "var(--ps-accent)", textTransform: "uppercase", letterSpacing: "0.12em" }, children: isRecommended ? t("Recommended Size") : t("Not Recommended") }),
@@ -5595,10 +5844,28 @@ function SizeResultView({
     ] }),
     (allDone || sizingResult && !isSnapProcessing) && /* @__PURE__ */ jsxs(Fragment, { children: [
       isMultiSection ? activeSection ? (
-        /* ── Detail view for a single section — v2 layout ── */
+        /* ── Detail view for a single section ── */
         (() => {
           const entry = sectionEntries.find((e) => e.name === activeSection);
           if (!entry) return null;
+          if (isMobile) {
+            return /* @__PURE__ */ jsx(
+              SectionDetailView,
+              {
+                sectionName: entry.name,
+                section: entry.section,
+                sectionResult: entry.secResult,
+                userMeasurements: entry.userMeasurements,
+                unitLbl,
+                lengthEntry: findLengthForSection(entry.name, lengthEntries),
+                onBack: () => setActiveSection(null),
+                productImage: resultImageUrl || productImage,
+                productTitle,
+                isMobile: true,
+                t
+              }
+            );
+          }
           return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2", children: [
             /* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-bg", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img" }) }),
             /* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-panel", children: /* @__PURE__ */ jsx(