@primestyleai/tryon 5.6.17 → 5.6.19

package/dist/react/index.js

@@ -330,12 +330,30 @@ async function recommendForProduct(input) {
   if (!input.skipCache) {
     const cached = getCachedSize(profile, input.productId);
     if (cached) {
+      const reconstructedRaw = cached.sectionsFull ? {
+        recommendedSize: cached.recommendedSize,
+        confidence: cached.confidence || "high",
+        reasoning: "",
+        recommendedLength: cached.recommendedLength,
+        sections: Object.fromEntries(
+          Object.entries(cached.sectionsFull).map(([name, sec]) => [
+            name,
+            { ...sec, matchDetails: [] }
+          ])
+        )
+      } : {
+        recommendedSize: cached.recommendedSize,
+        confidence: cached.confidence || "high",
+        reasoning: "",
+        recommendedLength: cached.recommendedLength
+      };
       return {
         recommendedSize: cached.recommendedSize,
         confidence: cached.confidence,
         sections: cached.sections,
         profileId: profile.id,
-        fromCache: true
+        fromCache: true,
+        raw: reconstructedRaw
       };
     }
   }
@@ -405,6 +423,19 @@ async function recommendForProduct(input) {
   const sectionsMap = result.sections ? Object.fromEntries(
     Object.entries(result.sections).map(([name, sec]) => [name, sec.recommendedSize])
   ) : void 0;
+  const sectionsFull = result.sections ? Object.fromEntries(
+    Object.entries(result.sections).map(([name, sec]) => [
+      name,
+      {
+        recommendedSize: sec.recommendedSize,
+        // Backend may include these on merged Jacket/Pants entries
+        size: sec.size,
+        length: sec.length,
+        availableSizes: sec.availableSizes,
+        availableLengths: sec.availableLengths
+      }
+    ])
+  ) : void 0;
   addSizeToHistory(profile.id, {
     productId: input.productId,
     productTitle: input.productTitle,
@@ -412,6 +443,8 @@ async function recommendForProduct(input) {
     recommendedSize: result.recommendedSize,
     confidence: result.confidence,
     sections: sectionsMap,
+    sectionsFull,
+    recommendedLength: result.recommendedLength || void 0,
     savedAt: Date.now()
   });
   return {
@@ -3647,13 +3680,10 @@ const STYLES = `
     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;
-  }
+  /* Try-on result keeps the same neutral background as the product hero —
+   *  no dark backdrop on mobile. */
   .ps-msr-product-img {
-    max-width: 100%; max-height: 100%;
-    width: auto; height: 100%;
+    width: 100%; height: 100%;
     object-fit: contain; display: block;
   }
   /* Show-Fit / mediapipe overlay toggle pill — bottom-left of try-on hero */
@@ -3814,6 +3844,12 @@ const STYLES = `
     letter-spacing: -0.01em;
     margin: 0 0 6px;
   }
+  /* Wrapper that vertically centers the cards in whatever space is left
+   *  between the title at the top and the bottom navigation. */
+  .ps-bsm-options-center {
+    flex: 1 1 auto; min-height: 0;
+    display: flex; flex-direction: column; justify-content: center;
+  }
   .ps-bsm-options {
     display: flex; flex-direction: column; gap: 12px;
   }
@@ -4860,8 +4896,7 @@ const STYLES = `
     flex-shrink: 0;
   }
   .ps-msd-image-img {
-    max-width: 100%; max-height: 100%;
-    width: auto; height: 100%;
+    width: 100%; height: 100%;
     object-fit: contain; display: block;
   }
 
@@ -6168,23 +6203,17 @@ function MobileScanningView({
   };
   const [stageIdx, setStageIdx] = useState(0);
   useEffect(() => {
-    if (sizingDone) return;
+    const id = setInterval(() => {
+      setStageIdx((i) => (i + 1) % stages.length);
+    }, 1500);
+    return () => clearInterval(id);
+  }, [stages.length]);
+  useEffect(() => {
     if (isPhotoMode && bodyLandmarks && stageIdx === 0) {
       setStageIdx(1);
-      return;
     }
-    const id = setInterval(() => {
-      setStageIdx((i) => Math.min(i + 1, stages.length - 1));
-    }, 1600);
-    return () => clearInterval(id);
-  }, [bodyLandmarks, sizingDone, stageIdx, stages.length, isPhotoMode]);
+  }, [bodyLandmarks]);
   const current = stages[stageIdx] ?? stages[0];
-  const [feedTick, setFeedTick] = useState(1);
-  useEffect(() => {
-    if (sizingDone) return;
-    const id = setInterval(() => setFeedTick((n) => n + 1), 850);
-    return () => clearInterval(id);
-  }, [sizingDone]);
   return /* @__PURE__ */ jsxs("div", { className: "ps-msc-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-msc-viewfinder", children: [
       displayImage && /* @__PURE__ */ jsx(
@@ -6484,6 +6513,15 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
     const delay = i * 0.35;
     const curvePath = `M ${x1} ${cy} Q ${midX} ${cy + curveDepth} ${x2} ${cy}`;
     const lineLen = width * 1.05;
+    const labelText = fitRow ? fitRow.fit === "good" ? "✓ Fit" : fitRow.fit.includes("tight") ? "Tight" : "Loose" : label;
+    const labelFont = Math.round(14 * scale);
+    const labelWidthEst = labelText.length * labelFont * 0.62;
+    const rightSpace = W - x2 - 12 * scale;
+    const flipLeft = rightSpace < labelWidthEst;
+    const labelX = flipLeft ? x1 - 10 * scale : x2 + 10 * scale;
+    const labelAnchor = flipLeft ? "end" : "start";
+    const tickX1 = flipLeft ? x1 : x2;
+    const tickX2 = flipLeft ? x1 - 6 * scale : x2 + 6 * scale;
     return /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "path",
@@ -6524,9 +6562,9 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
         /* @__PURE__ */ jsx(
           "line",
           {
-            x1: x2,
+            x1: tickX1,
             y1: cy,
-            x2: x2 + 6 * scale,
+            x2: tickX2,
             y2: cy,
             stroke: color,
             strokeWidth: 2 * scale
@@ -6535,14 +6573,15 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
         /* @__PURE__ */ jsx(
           "text",
           {
-            x: x2 + 10 * scale,
+            x: labelX,
             y: cy + 1 * scale,
             fill: color,
-            fontSize: Math.round(14 * scale),
+            fontSize: labelFont,
             fontWeight: "700",
             fontFamily: "system-ui, -apple-system, sans-serif",
             dominantBaseline: "middle",
-            children: fitRow ? fitRow.fit === "good" ? "✓ Fit" : fitRow.fit.includes("tight") ? "Tight" : "Loose" : label
+            textAnchor: labelAnchor,
+            children: labelText
           }
         )
       ] })
@@ -9232,7 +9271,7 @@ function BodyShapeStepMobile({
       String(totalSteps).padStart(2, "0")
     ] }),
     /* @__PURE__ */ jsx("h2", { className: "ps-bsm-question", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "ps-bsm-options", children: options.map((opt, idx) => {
+    /* @__PURE__ */ jsx("div", { className: "ps-bsm-options-center", children: /* @__PURE__ */ jsx("div", { className: "ps-bsm-options", children: options.map((opt, idx) => {
       const isActive = selected === opt.value;
       const profileLetter = String.fromCharCode(65 + idx);
       return /* @__PURE__ */ jsxs(
@@ -9255,7 +9294,7 @@ function BodyShapeStepMobile({
         },
         opt.value
       );
-    }) })
+    }) }) })
   ] });
 }
 function CameraUploadIcon() {