@primestyleai/tryon 5.8.25 → 5.8.27

package/dist/react/index.js

@@ -4483,13 +4483,16 @@ const STYLES = `
 
   .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) */
@@ -4773,17 +4776,18 @@ const STYLES = `
     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%;
@@ -4800,25 +4804,24 @@ const STYLES = `
     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;
@@ -4834,10 +4837,14 @@ const STYLES = `
      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; }
@@ -4849,7 +4856,7 @@ const STYLES = `
     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);
@@ -8790,6 +8797,27 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
     }
     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") {
@@ -8798,6 +8826,7 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
     }
     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) {
@@ -8977,18 +9006,9 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
           title: t("CHEST PROFILE"),
           subtitle: t("Select the profile that best matches your chest breadth"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.narrow ?? null, label: t("NARROW"), selected: chestProfile === "narrow", onSelect: () => {
-              setChestProfile("narrow");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.average ?? null, label: t("AVERAGE"), selected: chestProfile === "average", onSelect: () => {
-              setChestProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.broad ?? null, label: t("BROAD"), selected: chestProfile === "broad", onSelect: () => {
-              setChestProfile("broad");
-              setError("");
-            } })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.narrow ?? null, label: t("NARROW"), selected: chestProfile === "narrow", onSelect: () => pickShape("chest", "narrow") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.average ?? null, label: t("AVERAGE"), selected: chestProfile === "average", onSelect: () => pickShape("chest", "average") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.broad ?? null, label: t("BROAD"), selected: chestProfile === "broad", onSelect: () => pickShape("chest", "broad") })
           ]
         }
       ),
@@ -8999,18 +9019,9 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
           title: t("STOMACH PROFILE"),
           subtitle: t("Describe your mid-section silhouette"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.flat ?? null, label: t("FLAT"), selected: midsectionProfile === "flat", onSelect: () => {
-              setMidsectionProfile("flat");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.average ?? null, label: t("AVERAGE"), selected: midsectionProfile === "average", onSelect: () => {
-              setMidsectionProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.round ?? null, label: t("ROUND"), selected: midsectionProfile === "round", onSelect: () => {
-              setMidsectionProfile("round");
-              setError("");
-            } })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.flat ?? null, label: t("FLAT"), selected: midsectionProfile === "flat", onSelect: () => pickShape("stomach", "flat") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.average ?? null, label: t("AVERAGE"), selected: midsectionProfile === "average", onSelect: () => pickShape("stomach", "average") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.round ?? null, label: t("ROUND"), selected: midsectionProfile === "round", onSelect: () => pickShape("stomach", "round") })
           ]
         }
       ),
@@ -9021,18 +9032,9 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
           title: t("BACK & SEAT"),
           subtitle: t("The curvature of your lower spine and seat profile"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.narrow ?? null, label: t("STRAIGHT"), selected: seatProfile === "narrow", onSelect: () => {
-              setSeatProfile("narrow");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.average ?? null, label: t("CURVED"), selected: seatProfile === "average", onSelect: () => {
-              setSeatProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.full ?? null, label: t("DEEP"), selected: seatProfile === "full", onSelect: () => {
-              setSeatProfile("full");
-              setError("");
-            } })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.narrow ?? null, label: t("STRAIGHT"), selected: seatProfile === "narrow", onSelect: () => pickShape("seat", "narrow") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.average ?? null, label: t("CURVED"), selected: seatProfile === "average", onSelect: () => pickShape("seat", "average") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.full ?? null, label: t("DEEP"), selected: seatProfile === "full", onSelect: () => pickShape("seat", "full") })
           ]
         }
       ),
@@ -9043,18 +9045,9 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
           title: t("HIP PROFILE"),
           subtitle: t("The curvature of your hips and thighs"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.narrow ?? null, label: t("NARROW"), selected: hipProfile === "narrow", onSelect: () => {
-              setHipProfile("narrow");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.average ?? null, label: t("AVERAGE"), selected: hipProfile === "average", onSelect: () => {
-              setHipProfile("average");
-              setError("");
-            } }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.full ?? null, label: t("FULL"), selected: hipProfile === "full", onSelect: () => {
-              setHipProfile("full");
-              setError("");
-            } })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.narrow ?? null, label: t("NARROW"), selected: hipProfile === "narrow", onSelect: () => pickShape("hips", "narrow") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.average ?? null, label: t("AVERAGE"), selected: hipProfile === "average", onSelect: () => pickShape("hips", "average") }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.full ?? null, label: t("FULL"), selected: hipProfile === "full", onSelect: () => pickShape("hips", "full") })
           ]
         }
       ),
@@ -9169,7 +9162,7 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-cpw-footer", children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-back-btn", onClick: handleBack, children: mode == null ? t("Cancel") : `← ${t("Back")}` }),
-      mode === "manual" && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-next-btn", onClick: advanceManual, children: isLastManualStep ? t("CALCULATE MY FIT") : t("Continue") }),
+      mode === "manual" && !isAutoAdvanceStep && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-next-btn", onClick: advanceManual, children: isLastManualStep ? t("CALCULATE MY FIT") : t("Continue") }),
       mode === "image" && /* @__PURE__ */ jsx(
         "button",
         {
@@ -12218,7 +12211,7 @@ function PrimeStyleTryonInner({
       }
     ),
     view !== "idle" && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" ? " ps-tryon-modal-wide" : ""}${view === "profiles" ? " ps-tryon-modal-tall" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
         /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
           /* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
           /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => {