@primestyleai/tryon 5.6.8 → 5.6.9

package/dist/react/index.js

@@ -3732,6 +3732,155 @@ const STYLES = `
   .ps-msr-tryon-cta:disabled { opacity: 0.4; cursor: not-allowed; }
   .ps-msr-tryon-cta svg { flex-shrink: 0; }
 
+  /* ════════════════════════════════════════════════════════════════
+     BodyShapeStepMobile (.ps-bsm-*) — vertical stacked option cards
+     for body shape questions on mobile (chest / midsection / seat /
+     hips). Matches the THE DIGITAL TAILOR reference design themed
+     with the user's accent color.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-bsm-root {
+    display: flex; flex-direction: column;
+    gap: 18px; padding: 8px 4px 24px;
+    flex: 1; min-height: 0;
+  }
+  .ps-bsm-step {
+    font-size: 11px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+    margin-bottom: -4px;
+  }
+  .ps-bsm-question {
+    font-size: 26px; font-weight: 800;
+    color: var(--ps-text-primary);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+    margin: 0 0 6px;
+  }
+  .ps-bsm-options {
+    display: flex; flex-direction: column; gap: 12px;
+  }
+  .ps-bsm-card {
+    display: flex; align-items: center; justify-content: space-between;
+    width: 100%;
+    padding: 16px 18px;
+    background: var(--ps-bg-secondary);
+    border: 2px solid transparent;
+    border-radius: 14px;
+    cursor: pointer; font-family: inherit;
+    text-align: left;
+    transition: background 0.18s, border-color 0.18s, transform 0.15s;
+  }
+  .ps-bsm-card:active { transform: scale(0.985); }
+  .ps-bsm-card.ps-active {
+    background: var(--ps-accent);
+    border-color: var(--ps-accent);
+    box-shadow: 0 8px 24px rgba(33, 84, 239, 0.22);
+  }
+  .ps-bsm-card-content {
+    display: flex; flex-direction: column; gap: 6px;
+    min-width: 0;
+  }
+  .ps-bsm-card-eyebrow {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-bsm-card.ps-active .ps-bsm-card-eyebrow {
+    color: rgba(255, 255, 255, 0.7);
+  }
+  .ps-bsm-card-label {
+    font-size: 22px; font-weight: 800;
+    color: var(--ps-text-primary);
+    letter-spacing: 0.02em;
+  }
+  .ps-bsm-card.ps-active .ps-bsm-card-label { color: #FFFFFF; }
+  .ps-bsm-card-thumb {
+    flex-shrink: 0;
+    width: 64px; height: 64px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.6);
+    display: flex; align-items: center; justify-content: center;
+    overflow: hidden;
+    margin-left: 14px;
+  }
+  .ps-bsm-card.ps-active .ps-bsm-card-thumb {
+    background: rgba(255, 255, 255, 0.18);
+  }
+  .ps-bsm-card-thumb img {
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain;
+  }
+
+  /* Mobile bra step fixes — give grid items breathing room and keep
+     the dropdown visible. The desktop layout uses .ps-bp-bra-* but
+     it's tight on phones. */
+  @media (max-width: 768px) {
+    .ps-bp-bra-step { padding: 4px 4px 24px; }
+    .ps-bp-bra-step .ps-bp-title {
+      font-size: 22px; font-weight: 800;
+      text-align: left; margin-bottom: 18px;
+      letter-spacing: -0.01em;
+    }
+    .ps-bp-bra-section { margin-bottom: 22px; }
+    .ps-bp-bra-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .ps-bp-bra-label {
+      font-size: 11px !important; font-weight: 700;
+      letter-spacing: 0.14em; text-transform: uppercase;
+      color: var(--ps-text-muted);
+    }
+    .ps-bp-bra-region-trigger {
+      padding: 6px 12px !important; font-size: 12px !important;
+      border: 1px solid var(--ps-border-color); border-radius: 999px;
+      background: var(--ps-bg-secondary);
+      color: var(--ps-text-secondary);
+    }
+    .ps-bp-bra-region-dropdown {
+      position: absolute; right: 0; top: 100%;
+      margin-top: 6px;
+      background: var(--ps-bg-primary);
+      border: 1px solid var(--ps-border-color);
+      border-radius: 10px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+      padding: 6px;
+      z-index: 5;
+      display: flex; flex-direction: column; gap: 2px;
+      min-width: 80px;
+    }
+    .ps-bp-bra-region-item {
+      padding: 8px 12px !important; font-size: 12px !important;
+      border-radius: 6px; background: none; border: none;
+      cursor: pointer; text-align: left;
+      color: var(--ps-text-secondary);
+    }
+    .ps-bp-bra-region-item.ps-selected {
+      background: var(--ps-accent); color: #FFFFFF;
+    }
+    .ps-bp-bra-grid {
+      display: grid !important;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 8px;
+    }
+    .ps-bp-bra-btn {
+      padding: 12px 4px !important; font-size: 13px !important;
+      border-radius: 8px;
+      border: 1.5px solid var(--ps-border-color);
+      background: var(--ps-bg-primary);
+      color: var(--ps-text-primary);
+      font-weight: 600;
+      cursor: pointer;
+      min-height: 44px;
+    }
+    .ps-bp-bra-btn-selected {
+      background: var(--ps-accent) !important;
+      border-color: var(--ps-accent) !important;
+      color: #FFFFFF !important;
+    }
+  }
+
   /* ════════════════════════════════════════════════════════════════
      MobileSectionDetail (.ps-msd-*) — section detail view on mobile.
      Layout: scroll container with rich blueprint rows matching the
@@ -8721,6 +8870,50 @@ function PhotoStepMobile({
     ] })
   ] });
 }
+function BodyShapeStepMobile({
+  stepNumber,
+  totalSteps,
+  title,
+  options,
+  selected,
+  onSelect,
+  t
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "ps-bsm-root", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-bsm-step", children: [
+      t("STEP"),
+      " ",
+      String(stepNumber).padStart(2, "0"),
+      " / ",
+      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) => {
+      const isActive = selected === opt.value;
+      const profileLetter = String.fromCharCode(65 + idx);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `ps-bsm-card${isActive ? " ps-active" : ""}`,
+          onClick: () => onSelect(opt.value),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-bsm-card-content", children: [
+              /* @__PURE__ */ jsxs("span", { className: "ps-bsm-card-eyebrow", children: [
+                t("PROFILE"),
+                " ",
+                profileLetter
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "ps-bsm-card-label", children: opt.label.toUpperCase() })
+            ] }),
+            opt.img && /* @__PURE__ */ jsx("div", { className: "ps-bsm-card-thumb", children: /* @__PURE__ */ jsx("img", { src: opt.img, alt: opt.label }) })
+          ]
+        },
+        opt.value
+      );
+    }) })
+  ] });
+}
 function CameraUploadIcon() {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "24", height: "24", children: [
     /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
@@ -9280,7 +9473,23 @@ function BodyProfileView({
           error && /* @__PURE__ */ jsx("p", { className: "ps-bp-error", children: error })
         ] }, "step-basics");
       })(),
-      step === "chest" && !isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      step === "chest" && !isWomen && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("chest") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR CHEST?"),
+          options: [
+            { value: "narrow", label: t("Narrow"), img: BODY_IMAGES.male.chest.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.male.chest.average },
+            { value: "broad", label: t("Broad"), img: BODY_IMAGES.male.chest.broad }
+          ],
+          selected: chestProfile,
+          onSelect: (v) => setChestProfile(v),
+          t
+        },
+        "step-chest-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your chest?") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.chest.narrow, label: t("Narrow"), selected: chestProfile === "narrow", onSelect: () => setChestProfile("narrow"), onHover: () => setHoverDesc(t("A slimmer, narrower chest build")), onLeave: () => setHoverDesc("") }),
@@ -9288,8 +9497,28 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.chest.broad, label: t("Broad"), selected: chestProfile === "broad", onSelect: () => setChestProfile("broad"), onHover: () => setHoverDesc(t("A wider, more muscular chest")), onLeave: () => setHoverDesc("") })
         ] }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-chest"),
-      step === "midsection" && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      ] }, "step-chest")),
+      step === "midsection" && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("midsection") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR MIDSECTION?"),
+          options: isWomen ? [
+            { value: "flat", label: t("Flat"), img: BODY_IMAGES.female.stomach.flat },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.female.stomach.average },
+            { value: "round", label: t("Full"), img: BODY_IMAGES.female.stomach.round }
+          ] : [
+            { value: "flat", label: t("Flat"), img: BODY_IMAGES.male.stomach.flat },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.male.stomach.average },
+            { value: "round", label: t("Full"), img: BODY_IMAGES.male.stomach.round }
+          ],
+          selected: midsectionProfile,
+          onSelect: (v) => setMidsectionProfile(v),
+          t
+        },
+        "step-midsection-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your midsection?") }),
         /* @__PURE__ */ jsx("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: isWomen ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.stomach.flat, label: t("Flat"), selected: midsectionProfile === "flat", onSelect: () => setMidsectionProfile("flat"), onHover: () => setHoverDesc(t("A flatter midsection with minimal protrusion")), onLeave: () => setHoverDesc("") }),
@@ -9301,8 +9530,28 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.stomach.round, label: t("Full"), selected: midsectionProfile === "round", onSelect: () => setMidsectionProfile("round"), onHover: () => setHoverDesc(t("A fuller, more rounded midsection")), onLeave: () => setHoverDesc("") })
         ] }) }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-midsection"),
-      step === "seat" && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      ] }, "step-midsection")),
+      step === "seat" && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("seat") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR SEAT?"),
+          options: isWomen ? [
+            { value: "narrow", label: t("Flat"), img: BODY_IMAGES.female.seat.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.female.seat.average },
+            { value: "full", label: t("Full"), img: BODY_IMAGES.female.seat.full }
+          ] : [
+            { value: "narrow", label: t("Flat"), img: BODY_IMAGES.male.seat.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.male.seat.average },
+            { value: "full", label: t("Full"), img: BODY_IMAGES.male.seat.full }
+          ],
+          selected: seatProfile,
+          onSelect: (v) => setSeatProfile(v),
+          t
+        },
+        "step-seat-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your seat?") }),
         /* @__PURE__ */ jsx("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: isWomen ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.seat.narrow, label: t("Flat"), selected: seatProfile === "narrow", onSelect: () => setSeatProfile("narrow"), onHover: () => setHoverDesc(t("A flatter backside with less projection")), onLeave: () => setHoverDesc("") }),
@@ -9314,8 +9563,24 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.male.seat.full, label: t("Full"), selected: seatProfile === "full", onSelect: () => setSeatProfile("full"), onHover: () => setHoverDesc(t("A fuller, more rounded backside")), onLeave: () => setHoverDesc("") })
         ] }) }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-seat"),
-      step === "hips" && isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
+      ] }, "step-seat")),
+      step === "hips" && isWomen && (isMobile ? /* @__PURE__ */ jsx(
+        BodyShapeStepMobile,
+        {
+          stepNumber: steps.indexOf("hips") + 1,
+          totalSteps: steps.length,
+          title: t("WHICH BEST DESCRIBES YOUR HIPS?"),
+          options: [
+            { value: "narrow", label: t("Narrow"), img: BODY_IMAGES.female.hips.narrow },
+            { value: "average", label: t("Average"), img: BODY_IMAGES.female.hips.average },
+            { value: "full", label: t("Curvy"), img: BODY_IMAGES.female.hips.full }
+          ],
+          selected: hipProfile,
+          onSelect: (v) => setHipProfile(v),
+          t
+        },
+        "step-hips-mobile"
+      ) : /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-single-q", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Which best describes your hips?") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-bp-shape-row ps-bp-shape-row-full", children: [
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.hips.narrow, label: t("Narrow"), selected: hipProfile === "narrow", onSelect: () => setHipProfile("narrow"), onHover: () => setHoverDesc(t("Hips closer to shoulder width")), onLeave: () => setHoverDesc("") }),
@@ -9323,7 +9588,7 @@ function BodyProfileView({
           /* @__PURE__ */ jsx(ImageOptionCard, { img: BODY_IMAGES.female.hips.full, label: t("Curvy"), selected: hipProfile === "full", onSelect: () => setHipProfile("full"), onHover: () => setHoverDesc(t("Hips wider than shoulders")), onLeave: () => setHoverDesc("") })
         ] }),
         /* @__PURE__ */ jsx("p", { className: "ps-bp-hover-hint", children: hoverDesc || " " })
-      ] }, "step-hips"),
+      ] }, "step-hips")),
       step === "bra" && isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-bp-step ps-bp-step-enter ps-bp-bra-step", children: [
         /* @__PURE__ */ jsx("h2", { className: "ps-bp-title", children: t("Select your bra size") }),
         /* @__PURE__ */ jsxs("div", { className: "ps-bp-bra-section", children: [