@primestyleai/tryon 5.8.25 → 5.8.26

package/dist/storefront/primestyle-tryon.js

@@ -13907,13 +13907,16 @@ const STYLES$1 = `
 
   .ps-cpw-body {
     display: flex; flex-direction: column;
-    gap: 12px;
+    gap: 14px;
     flex: 1; min-height: 0;
     width: 100%; max-width: 100%;
     box-sizing: border-box;
-    /* Hard cap — every step is sized to fit. NO scrolling. */
-    overflow: hidden;
-    padding: 12px 16px 12px;
+    /* Modal height is fixed by the parent — don't grow it. If a step
+       happens to be taller (rare), let it scroll inside the body
+       instead of forcing the modal to expand. */
+    overflow-y: auto; overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    padding: 14px 16px;
   }
 
   /* Step 1 — Identity form (compact) */
@@ -14197,17 +14200,18 @@ const STYLES$1 = `
     justify-content: center;
   }
   .ps-cpw-method-intro { display: none; }
+  /* Two cards side by side. Each card stacks the illustration on top
+     and the text below — keeps the cards short and lets the picker fit
+     inside the wizard body without changing the modal height. */
   .ps-cpw-method-grid {
-    display: flex; flex-direction: column;
-    gap: 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
     width: 100%; max-width: 100%;
     box-sizing: border-box;
   }
-  /* Horizontal card: small square image on the left, text on the right.
-     Total card height ≈ 84px so two cards + the header + footer all fit
-     well inside the modal viewport. */
   .ps-cpw-method-card {
-    display: flex; align-items: stretch;
+    display: flex; flex-direction: column; align-items: stretch;
     gap: 0;
     min-width: 0;
     width: 100%; max-width: 100%;
@@ -14224,25 +14228,24 @@ const STYLES$1 = `
     transform: translateY(-1px);
     box-shadow: 0 6px 18px rgba(33, 84, 239, 0.10);
   }
-  /* AI illustration — small square slot on the LEFT */
+  /* Square-ish illustration slot at the top of each card */
   .ps-cpw-method-img {
-    width: 84px; height: 84px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
     flex-shrink: 0;
     background: var(--ps-bg-secondary);
     display: flex; align-items: center; justify-content: center;
-    border-right: 1px solid var(--ps-border-subtle);
+    border-bottom: 1px solid var(--ps-border-subtle);
   }
   .ps-cpw-method-img img {
     width: 100%; height: 100%;
     object-fit: contain;
     display: block;
   }
-  /* Text — to the right of the illustration */
   .ps-cpw-method-text {
-    display: flex; flex-direction: column; gap: 3px; justify-content: center;
-    padding: 10px 14px;
-    flex: 1; min-width: 0;
-    box-sizing: border-box;
+    display: flex; flex-direction: column; gap: 3px;
+    padding: 10px 12px 12px;
+    width: 100%; box-sizing: border-box;
   }
   .ps-cpw-method-title {
     font-size: 13px; font-weight: 700;
@@ -14258,10 +14261,14 @@ const STYLES$1 = `
      them inside the wizard body so all rows fit without scrolling. */
   .ps-cpw-inline-fields {
     width: 100%;
-    margin-top: 0;
+    margin-top: 4px;
+    /* Generous breathing room between rows so the inputs don't feel
+       cramped together — each row owns its own divider. */
+    display: flex; flex-direction: column;
+    gap: 6px;
   }
   .ps-cpw-inline-fields .ps-bp-inline-row {
-    padding: 8px 0;
+    padding: 14px 2px;
     border-bottom: 1px solid var(--ps-border-subtle);
   }
   .ps-cpw-inline-fields .ps-bp-inline-row:last-child { border-bottom: none; }
@@ -14273,7 +14280,7 @@ const STYLES$1 = `
     letter-spacing: 0.08em;
   }
   .ps-cpw-inline-fields .ps-bp-inline-input {
-    font-size: 13px;
+    font-size: 14px;
     padding-bottom: 0;
     border-bottom: none; /* parent row owns the divider */
     color: var(--ps-text-primary);
@@ -18214,6 +18221,27 @@ function CreateProfileWizard({ onSave, onCancel, t: t2 }) {
     }
     setManualStep(manualStepOrder[manualStepIdx + 1]);
   };
+  const pickShape = (step, value) => {
+    setError("");
+    if (step === "chest") setChestProfile(value);
+    else if (step === "stomach") setMidsectionProfile(value);
+    else if (step === "seat") setSeatProfile(value);
+    else if (step === "hips") setHipProfile(value);
+    const idx = manualStepOrder.indexOf(step);
+    const isLast = idx === manualStepCount - 1;
+    setTimeout(() => {
+      if (isLast) {
+        const payload = buildManualPayload();
+        if (step === "chest") payload.chestProfile = value;
+        else if (step === "stomach") payload.midsectionProfile = value;
+        else if (step === "seat") payload.hipProfile = value;
+        else if (step === "hips") payload.hipProfile = value;
+        onSave(payload);
+      } else {
+        setManualStep(manualStepOrder[idx + 1]);
+      }
+    }, 220);
+  };
   const goBackManual = () => {
     setError("");
     if (manualStep === "identity") {
@@ -18222,6 +18250,7 @@ function CreateProfileWizard({ onSave, onCancel, t: t2 }) {
     }
     setManualStep(manualStepOrder[Math.max(0, manualStepIdx - 1)]);
   };
+  const isAutoAdvanceStep = mode === "manual" && (manualStep === "chest" || manualStep === "stomach" || manualStep === "seat" || manualStep === "hips");
   const advanceImage = () => {
     if (!validateNameOnly()) return;
     if (!photoBase64) {
@@ -18401,18 +18430,9 @@ function CreateProfileWizard({ onSave, onCancel, t: t2 }) {
           title: t2("CHEST PROFILE"),
           subtitle: t2("Select the profile that best matches your chest breadth"),
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.chest?.narrow ?? null, label: t2("NARROW"), selected: chestProfile === "narrow", onSelect: () => {
-              setChestProfile("narrow");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.chest?.average ?? null, label: t2("AVERAGE"), selected: chestProfile === "average", onSelect: () => {
-              setChestProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.chest?.broad ?? null, label: t2("BROAD"), selected: chestProfile === "broad", onSelect: () => {
-              setChestProfile("broad");
-              setError("");
-            } })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.chest?.narrow ?? null, label: t2("NARROW"), selected: chestProfile === "narrow", onSelect: () => pickShape("chest", "narrow") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.chest?.average ?? null, label: t2("AVERAGE"), selected: chestProfile === "average", onSelect: () => pickShape("chest", "average") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.chest?.broad ?? null, label: t2("BROAD"), selected: chestProfile === "broad", onSelect: () => pickShape("chest", "broad") })
           ]
         }
       ),
@@ -18423,18 +18443,9 @@ function CreateProfileWizard({ onSave, onCancel, t: t2 }) {
           title: t2("STOMACH PROFILE"),
           subtitle: t2("Describe your mid-section silhouette"),
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.stomach?.flat ?? null, label: t2("FLAT"), selected: midsectionProfile === "flat", onSelect: () => {
-              setMidsectionProfile("flat");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.stomach?.average ?? null, label: t2("AVERAGE"), selected: midsectionProfile === "average", onSelect: () => {
-              setMidsectionProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.stomach?.round ?? null, label: t2("ROUND"), selected: midsectionProfile === "round", onSelect: () => {
-              setMidsectionProfile("round");
-              setError("");
-            } })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.stomach?.flat ?? null, label: t2("FLAT"), selected: midsectionProfile === "flat", onSelect: () => pickShape("stomach", "flat") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.stomach?.average ?? null, label: t2("AVERAGE"), selected: midsectionProfile === "average", onSelect: () => pickShape("stomach", "average") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.stomach?.round ?? null, label: t2("ROUND"), selected: midsectionProfile === "round", onSelect: () => pickShape("stomach", "round") })
           ]
         }
       ),
@@ -18445,18 +18456,9 @@ function CreateProfileWizard({ onSave, onCancel, t: t2 }) {
           title: t2("BACK & SEAT"),
           subtitle: t2("The curvature of your lower spine and seat profile"),
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.seat?.narrow ?? null, label: t2("STRAIGHT"), selected: seatProfile === "narrow", onSelect: () => {
-              setSeatProfile("narrow");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.seat?.average ?? null, label: t2("CURVED"), selected: seatProfile === "average", onSelect: () => {
-              setSeatProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.seat?.full ?? null, label: t2("DEEP"), selected: seatProfile === "full", onSelect: () => {
-              setSeatProfile("full");
-              setError("");
-            } })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.seat?.narrow ?? null, label: t2("STRAIGHT"), selected: seatProfile === "narrow", onSelect: () => pickShape("seat", "narrow") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.seat?.average ?? null, label: t2("CURVED"), selected: seatProfile === "average", onSelect: () => pickShape("seat", "average") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.seat?.full ?? null, label: t2("DEEP"), selected: seatProfile === "full", onSelect: () => pickShape("seat", "full") })
           ]
         }
       ),
@@ -18467,18 +18469,9 @@ function CreateProfileWizard({ onSave, onCancel, t: t2 }) {
           title: t2("HIP PROFILE"),
           subtitle: t2("The curvature of your hips and thighs"),
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.hips.narrow ?? null, label: t2("NARROW"), selected: hipProfile === "narrow", onSelect: () => {
-              setHipProfile("narrow");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.hips.average ?? null, label: t2("AVERAGE"), selected: hipProfile === "average", onSelect: () => {
-              setHipProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.hips.full ?? null, label: t2("FULL"), selected: hipProfile === "full", onSelect: () => {
-              setHipProfile("full");
-              setError("");
-            } })
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.hips.narrow ?? null, label: t2("NARROW"), selected: hipProfile === "narrow", onSelect: () => pickShape("hips", "narrow") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.hips.average ?? null, label: t2("AVERAGE"), selected: hipProfile === "average", onSelect: () => pickShape("hips", "average") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ShapeCard, { img: imgs.hips.full ?? null, label: t2("FULL"), selected: hipProfile === "full", onSelect: () => pickShape("hips", "full") })
           ]
         }
       ),
@@ -18593,7 +18586,7 @@ function CreateProfileWizard({ onSave, onCancel, t: t2 }) {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-cpw-footer", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-cpw-back-btn", onClick: handleBack, children: mode == null ? t2("Cancel") : `← ${t2("Back")}` }),
-      mode === "manual" && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-cpw-next-btn", onClick: advanceManual, children: isLastManualStep ? t2("CALCULATE MY FIT") : t2("Continue") }),
+      mode === "manual" && !isAutoAdvanceStep && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-cpw-next-btn", onClick: advanceManual, children: isLastManualStep ? t2("CALCULATE MY FIT") : t2("Continue") }),
       mode === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.8.25",
+  "version": "5.8.26",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",