@primestyleai/tryon 5.5.19 → 5.5.21

package/dist/react/index.js

@@ -3363,10 +3363,20 @@ const STYLES = `
      MultiSectionMobile (.ps-msr-*) — mobile multi-section results
      screen. Eyebrow + product hero + match badge + section list + CTA.
      ════════════════════════════════════════════════════════════════ */
+  /* Layout: header (modal-level) → flex column root → scroll content
+     (flex: 1, overflow-y: auto) → fixed bottom bar (flex-shrink: 0).
+     This is more reliable than position: sticky inside an
+     overflow:auto flex column, which was floating mid-screen. */
   .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 */
+    height: 100%; min-height: 0;
+    margin: 0 -16px;
+  }
+  .ps-msr-scroll {
+    flex: 1; min-height: 0;
+    overflow-y: auto; -webkit-overflow-scrolling: touch;
+    display: flex; flex-direction: column;
+    gap: 14px; padding: 8px 16px 24px;
   }
   .ps-msr-eyebrow {
     font-size: 10px; font-weight: 600;
@@ -3470,16 +3480,13 @@ const STYLES = `
     letter-spacing: -0.01em;
   }
 
-  /* Bottom CTA: sticky to the modal bottom so it's always accessible
-     while the cards above scroll. */
+  /* Fixed bottom action bar — always visible, content scrolls above it */
   .ps-msr-bottom {
-    position: sticky; bottom: 0;
-    margin: 14px -16px 0;
-    padding: 14px 16px;
-    padding-bottom: calc(14px + env(safe-area-inset-bottom));
+    flex-shrink: 0;
     background: var(--ps-bg-primary);
     border-top: 1px solid var(--ps-border-subtle);
-    z-index: 2;
+    padding: 14px 16px;
+    padding-bottom: calc(14px + env(safe-area-inset-bottom));
   }
   .ps-msr-tryon-cta {
     display: flex; align-items: center; justify-content: center; gap: 8px;
@@ -3496,6 +3503,184 @@ 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;
+  }
+  /* Measurement rows: label + inline values, badge on the right.
+     No table structure — clean and minimal like the reference. */
+  .ps-msd-rows {
+    display: flex; flex-direction: column;
+  }
+  .ps-msd-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 18px 4px;
+    border-bottom: 1px solid var(--ps-border-subtle);
+    gap: 12px;
+  }
+  .ps-msd-row:last-child { border-bottom: none; }
+  .ps-msd-row-info {
+    display: flex; flex-direction: column; gap: 6px;
+    flex: 1; min-width: 0;
+  }
+  .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-values {
+    display: flex; align-items: baseline; gap: 8px;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+  }
+  .ps-msd-row-you {
+    font-size: 17px; font-weight: 700;
+    color: var(--ps-text-primary);
+  }
+  .ps-msd-row-sep {
+    font-size: 16px; font-weight: 400;
+    color: var(--ps-border-color);
+  }
+  .ps-msd-row-spec {
+    font-size: 16px; font-weight: 500;
+    color: var(--ps-text-secondary);
+  }
+  .ps-msd-row-badge {
+    font-size: 9px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    padding: 5px 10px; border-radius: 999px;
+    flex-shrink: 0; white-space: nowrap;
+  }
+  .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;
+  }
+
+  /* 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 {
@@ -4729,58 +4914,60 @@ function MultiSectionMobile({
     return 72;
   }, [sizingResult]);
   return /* @__PURE__ */ jsxs("div", { className: "ps-msr-root", 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__ */ jsx("h2", { className: "ps-msr-product-name", children: productTitle })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msr-match-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-msr-match", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-msr-match-circle", children: [
-        /* @__PURE__ */ jsxs("svg", { className: "ps-msr-match-ring", viewBox: "0 0 44 44", children: [
-          /* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "20", fill: "none", stroke: "var(--ps-border-color)", strokeWidth: "3" }),
-          /* @__PURE__ */ jsx(
-            "circle",
-            {
-              cx: "22",
-              cy: "22",
-              r: "20",
-              fill: "none",
-              stroke: "var(--ps-accent)",
-              strokeWidth: "3",
-              strokeLinecap: "round",
-              strokeDasharray: `${matchPct / 100 * 125.66} 125.66`,
-              transform: "rotate(-90 22 22)"
-            }
-          )
+    /* @__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("span", { className: "ps-msr-match-pct", children: [
-          matchPct,
-          "%"
-        ] })
+        /* @__PURE__ */ jsx("h2", { className: "ps-msr-product-name", children: productTitle })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "ps-msr-match-label", children: t("FIT MATCH") })
-    ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msr-sections", children: sectionEntries.map(({ name, secResult }) => {
-      const cleanName = name.replace(/\s*[—–-]\s*.*/g, "");
-      const sec = secResult;
-      const sizeValue = sec.size || secResult.recommendedSize;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: "ps-msr-section-card",
-          onClick: () => onSelectSection(name),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "ps-msr-section-name", children: cleanName.toUpperCase() }),
-            /* @__PURE__ */ jsx("span", { className: "ps-msr-section-size", children: sizeValue })
-          ]
-        },
-        name
-      );
-    }) }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msr-match-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-msr-match", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-msr-match-circle", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "ps-msr-match-ring", viewBox: "0 0 44 44", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "20", fill: "none", stroke: "var(--ps-border-color)", strokeWidth: "3" }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: "22",
+                cy: "22",
+                r: "20",
+                fill: "none",
+                stroke: "var(--ps-accent)",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeDasharray: `${matchPct / 100 * 125.66} 125.66`,
+                transform: "rotate(-90 22 22)"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "ps-msr-match-pct", children: [
+            matchPct,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msr-match-label", children: t("FIT MATCH") })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msr-sections", children: sectionEntries.map(({ name, secResult }) => {
+        const cleanName = name.replace(/\s*[—–-]\s*.*/g, "");
+        const sec = secResult;
+        const sizeValue = sec.size || secResult.recommendedSize;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ps-msr-section-card",
+            onClick: () => onSelectSection(name),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-msr-section-name", children: cleanName.toUpperCase() }),
+              /* @__PURE__ */ jsx("span", { className: "ps-msr-section-size", children: sizeValue })
+            ]
+          },
+          name
+        );
+      }) })
+    ] }),
     /* @__PURE__ */ jsx("div", { className: "ps-msr-bottom", children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -5006,7 +5193,10 @@ function SectionDetailView({
   unitLbl,
   lengthEntry,
   onBack,
-  t
+  t,
+  productImage,
+  productTitle,
+  isMobile: isMobileProp
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = useState(null);
@@ -5163,6 +5353,85 @@ 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-info", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-msd-row-label", children: row.area.toUpperCase() }),
+              /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-values", children: [
+                /* @__PURE__ */ jsxs("span", { className: "ps-msd-row-you", children: [
+                  row.userNum,
+                  " ",
+                  unitLbl
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-row-sep", children: "/" }),
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-row-spec", children: row.chartLabel })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: `ps-msd-row-badge ${fitClass}`, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitBadgeLabel(row.fit) })
+          ] }, 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") }),
@@ -5581,10 +5850,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(