@primestyleai/tryon 5.5.21 → 5.5.23

package/dist/react/index.js

@@ -3263,25 +3263,29 @@ const STYLES = `
   .ps-msc-corner.ps-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
   .ps-msc-corner.ps-br { bottom: 0; right: 0; border-left: none; border-top: none; }
 
-  /* Scanning line that sweeps top-to-bottom */
+  /* Scanning line that sweeps top-to-bottom — GPU-accelerated.
+     Animating the top property caused first-paint stutter; switched
+     to translate3d so the browser composites on its own layer
+     without re-laying out the viewfinder on every frame. */
   .ps-msc-scanline {
     position: absolute; left: 28px; right: 28px;
-    height: 1.5px; z-index: 3;
+    top: 28px; height: 1.5px; z-index: 3;
     background: linear-gradient(
       to right,
       transparent,
-      rgba(180,220,255,0.85),
-      rgba(180,220,255,0.85),
+      rgba(180,220,255,0.9),
+      rgba(180,220,255,0.9),
       transparent
     );
-    box-shadow: 0 0 8px rgba(180,220,255,0.5);
-    animation: ps-msc-scan 2.6s ease-in-out infinite;
+    will-change: transform, opacity;
+    transform: translate3d(0, 0, 0);
+    animation: ps-msc-scan 2.8s ease-in-out 0.4s infinite;
   }
   @keyframes ps-msc-scan {
-    0%   { top: 28px; opacity: 0; }
-    10%  { opacity: 1; }
-    90%  { opacity: 1; }
-    100% { top: calc(100% - 28px); opacity: 0; }
+    0%   { transform: translate3d(0, 0, 0);                       opacity: 0; }
+    8%   { opacity: 1; }
+    92%  { opacity: 1; }
+    100% { transform: translate3d(0, min(calc(64vh - 60px), 480px), 0); opacity: 0; }
   }
 
   /* Pose skeleton overlay — sits over the photo */
@@ -3505,27 +3509,53 @@ const STYLES = `
 
   /* ════════════════════════════════════════════════════════════════
      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.
+     Layout: scroll container with rich blueprint rows matching the
+     reference (number prefix, description, USER/SIZE labels, badge).
      ════════════════════════════════════════════════════════════════ */
   .ps-msd-root {
     display: flex; flex-direction: column;
-    gap: 14px; padding: 4px 4px 60px;
     height: 100%; min-height: 0;
+    margin: 0 -16px;
+  }
+  .ps-msd-scroll {
+    flex: 1; min-height: 0;
     overflow-y: auto; -webkit-overflow-scrolling: touch;
+    display: flex; flex-direction: column;
+    gap: 18px; padding: 8px 16px 32px;
+  }
+  /* Topbar: back arrow + section name in uppercase */
+  .ps-msd-topbar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 0 4px;
+    margin-bottom: 4px;
   }
   .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;
+    color: var(--ps-text-primary);
+    font-family: inherit;
+    padding: 6px; cursor: pointer;
+    display: flex; align-items: center; gap: 4px;
+    transition: opacity 0.15s;
+    flex-shrink: 0;
   }
-  .ps-msd-back:hover { color: var(--ps-text-primary); }
+  .ps-msd-back:hover { opacity: 0.7; }
   .ps-msd-back-arrow { font-size: 16px; line-height: 1; }
+  .ps-msd-topbar-title {
+    font-size: 12px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+    text-align: center;
+    flex: 1;
+  }
+  .ps-msd-topbar-spacer { width: 32px; flex-shrink: 0; }
+
+  /* Footer paragraph (italic, small, muted) */
+  .ps-msd-footer-note {
+    font-size: 11px; line-height: 1.6;
+    color: var(--ps-text-muted);
+    text-align: center; font-style: italic;
+    margin: 14px 12px 0;
+  }
 
   /* Big product image */
   .ps-msd-image {
@@ -3541,109 +3571,135 @@ const STYLES = `
     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);
+  /* RECOMMENDED SIZE / FIT ACCURACY card */
+  .ps-msd-card {
+    background: var(--ps-bg-primary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 12px;
+    padding: 22px 22px 18px;
+    display: flex; flex-direction: column; gap: 8px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
   }
-  .ps-msd-section-name {
-    font-size: 11px; font-weight: 700;
-    letter-spacing: 0.14em; text-transform: uppercase;
+  .ps-msd-card-eyebrow {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
-  .ps-msd-size-row {
-    display: flex; align-items: baseline; gap: 8px;
+  .ps-msd-card-size-row {
+    display: flex; align-items: baseline; gap: 12px;
+    margin-top: 2px;
   }
-  .ps-msd-size-num {
-    font-size: 64px; font-weight: 700;
+  .ps-msd-card-size {
+    font-size: 56px; 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-card-size-meta {
+    font-size: 12px; font-weight: 600;
+    letter-spacing: 0.05em;
+    color: var(--ps-text-muted);
+  }
+  .ps-msd-card-divider {
+    height: 1px; background: var(--ps-border-subtle);
+    margin: 6px 0;
   }
-  .ps-msd-match {
-    display: flex; align-items: baseline; gap: 5px;
+  .ps-msd-card-pct-row {
+    display: flex; align-items: center; gap: 12px;
+    margin-top: 2px;
   }
-  .ps-msd-match-pct {
-    font-size: 13px; font-weight: 700;
+  .ps-msd-card-pct {
+    font-size: 30px; font-weight: 700;
     color: var(--ps-accent);
-    font-feature-settings: "tnum" 1;
+    line-height: 1; 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);
+  .ps-msd-card-bar {
+    flex: 1; height: 2px;
+    background: var(--ps-border-color); border-radius: 1px;
+    overflow: hidden;
+  }
+  .ps-msd-card-bar-fill {
+    height: 100%; background: var(--ps-accent);
+    border-radius: 1px;
+  }
+  .ps-msd-card-note {
+    font-size: 11px; color: var(--ps-text-muted);
+    line-height: 1.5; margin: 2px 0 0;
   }
 
-  /* MEASUREMENT BLUEPRINT */
+  /* MEASUREMENT BLUEPRINT — rich rows with number, description, USER/SIZE
+     labeled values, status badge with check icon */
   .ps-msd-blueprint {
-    display: flex; flex-direction: column; gap: 8px;
-    padding-top: 16px;
+    display: flex; flex-direction: column; gap: 6px;
+    padding-top: 6px;
   }
   .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;
+    font-size: 13px; font-weight: 800;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+    margin-bottom: 0;
+  }
+  .ps-msd-blueprint-underline {
+    width: 36px; height: 2px;
+    background: var(--ps-text-primary);
+    margin-bottom: 8px;
   }
-  /* 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;
+    display: flex; flex-direction: column;
+    padding: 22px 0 24px;
     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-num {
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+    margin-bottom: 4px;
   }
-  .ps-msd-row-label {
-    font-size: 10px; font-weight: 700;
-    letter-spacing: 0.12em; text-transform: uppercase;
+  .ps-msd-row-desc {
+    font-size: 12px; font-weight: 400;
     color: var(--ps-text-muted);
+    margin: 0 0 14px;
+    line-height: 1.5;
   }
-  .ps-msd-row-values {
-    display: flex; align-items: baseline; gap: 8px;
-    color: var(--ps-text-primary);
-    font-feature-settings: "tnum" 1;
+  .ps-msd-row-cells {
+    display: flex; justify-content: space-between; align-items: flex-end;
+    gap: 16px; margin-bottom: 14px;
   }
-  .ps-msd-row-you {
-    font-size: 17px; font-weight: 700;
-    color: var(--ps-text-primary);
+  .ps-msd-row-cell {
+    display: flex; flex-direction: column; gap: 4px;
+    min-width: 0;
   }
-  .ps-msd-row-sep {
-    font-size: 16px; font-weight: 400;
-    color: var(--ps-border-color);
+  .ps-msd-row-cell.ps-right { text-align: right; }
+  .ps-msd-cell-label {
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-muted);
   }
-  .ps-msd-row-spec {
-    font-size: 16px; font-weight: 500;
-    color: var(--ps-text-secondary);
+  .ps-msd-cell-value {
+    font-size: 18px; font-weight: 700;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+    line-height: 1.1;
   }
   .ps-msd-row-badge {
-    font-size: 9px; font-weight: 700;
+    align-self: flex-end;
+    display: inline-flex; align-items: center; gap: 5px;
+    font-size: 10px; font-weight: 700;
     letter-spacing: 0.12em; text-transform: uppercase;
-    padding: 5px 10px; border-radius: 999px;
-    flex-shrink: 0; white-space: nowrap;
+    white-space: nowrap;
   }
+  .ps-msd-row-badge svg { flex-shrink: 0; }
   .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;
   }
 
@@ -5355,46 +5411,95 @@ function SectionDetailView({
   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")
+    const measurementDesc = (area) => {
+      const a = area.toLowerCase().replace(/\s*\(.*?\)\s*/g, "").trim();
+      if (a.includes("chest") || a.includes("bust")) return t("Full circumference at the widest point.");
+      if (a.includes("waist")) return t("Circumference at the natural waistline.");
+      if (a.includes("hip")) return t("Circumference at the fullest point.");
+      if (a.includes("shoulder")) return t("Shoulder edge to shoulder edge.");
+      if (a.includes("sleeve") || a.includes("arm")) return t("Shoulder seam to cuff edge.");
+      if (a.includes("neck") || a.includes("collar")) return t("Around the base of the neck.");
+      if (a.includes("inseam") || a.includes("inside leg")) return t("Inner leg seam length.");
+      if (a.includes("thigh")) return t("Circumference around the upper leg.");
+      if (a.includes("length") || a.includes("height")) return t("Top to bottom length.");
+      return "";
+    };
+    const fitBadgeLabel = (fit, isLen) => {
+      if (isLen && fit === "good") return t("EDITORIAL LENGTH");
+      if (fit === "good") return t("PERFECT TENSION");
+      if (fit === "a-bit-tight") return t("SLIGHTLY TIGHT");
+      if (fit === "a-bit-loose") return t("SLIGHT EASE");
+      if (fit.includes("tight")) return t("TIGHT");
+      if (fit.includes("loose")) return t("LOOSE");
+      return t("FIT");
+    };
+    return /* @__PURE__ */ jsx("div", { className: "ps-msd-root", children: /* @__PURE__ */ jsxs("div", { className: "ps-msd-scroll", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-msd-topbar", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msd-back", onClick: onBack, "aria-label": t("Back"), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "20", height: "20", children: [
+          /* @__PURE__ */ jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+          /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("span", { className: "ps-msd-topbar-title", children: [
+          cleanSectionName.toUpperCase(),
+          " ",
+          t("DETAIL")
+        ] }),
+        /* @__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" }) }),
-      /* @__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-card", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: t("RECOMMENDED SIZE") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msd-card-size-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size", children: backendSize }),
+          finalDisplayLength && /* @__PURE__ */ jsx("span", { className: "ps-msd-card-size-meta", children: finalDisplayLength })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-msd-match", children: [
-          /* @__PURE__ */ jsxs("span", { className: "ps-msd-match-pct", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-msd-card-divider" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: t("FIT ACCURACY") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msd-card-pct-row", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ps-msd-card-pct", children: [
             matchPercent,
             "%"
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "ps-msd-match-label", children: t("FIT MATCH") })
-        ] })
+          /* @__PURE__ */ jsx("div", { className: "ps-msd-card-bar", children: /* @__PURE__ */ jsx("div", { className: "ps-msd-card-bar-fill", style: { width: `${matchPercent}%` } }) })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "ps-msd-card-note", children: t("Based on your measurements and the garment's tailoring chart.") })
       ] }),
       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-blueprint-underline" }),
         /* @__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";
+          const desc = measurementDesc(row.area);
+          const idxLbl = String(i + 1).padStart(2, "0");
           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: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-num", children: [
+              idxLbl,
+              " ",
+              row.area.toUpperCase()
+            ] }),
+            desc && /* @__PURE__ */ jsx("p", { className: "ps-msd-row-desc", children: desc }),
+            /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cells", children: [
+              /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell", children: [
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("USER") }),
+                /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-value", children: [
                   row.userNum,
                   " ",
                   unitLbl
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell ps-right", children: [
+                /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-label", children: [
+                  t("SIZE"),
+                  " ",
+                  backendSize
                 ] }),
-                /* @__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-cell-value", children: row.chartLabel })
               ] })
             ] }),
-            /* @__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-badge ${fitClass}`, children: [
+              row.isLength ? lengthFitLabelFn(row.fit, t).toUpperCase() : fitBadgeLabel(row.fit, row.isLength),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "11", height: "11", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 5" }) })
+            ] })
           ] }, i);
         }) })
       ] }),
@@ -5429,8 +5534,16 @@ function SectionDetailView({
             s
           );
         }) })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { className: "ps-msd-footer-note", children: [
+        t("*Our sizing engine recommends"),
+        " ",
+        backendSize,
+        finalDisplayLength ? ` (${finalDisplayLength})` : "",
+        " ",
+        t("based on your measurements and the garment's tailoring chart.")
       ] })
-    ] });
+    ] }) });
   }
   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: [