@primestyleai/tryon 5.8.28 → 5.8.30

package/dist/react/index.js

@@ -965,10 +965,11 @@ const STYLES = `
     height: 100%; overflow: hidden;
   }
 
-  /* Left image column — proper contained display */
+  /* Left image column — proper contained display.
+     No background — the product/try-on image sits directly on the modal
+     surface without a gray placeholder box behind it. */
   .ps-tryon-v2-bg {
     flex: 0 0 43%; position: relative; min-width: 0;
-    background: var(--ps-bg-secondary);
     border-radius: 0.9vw; overflow: hidden;
     display: flex; align-items: center; justify-content: center;
   }
@@ -4516,10 +4517,11 @@ const STYLES = `
   }
   .ps-cpw-field {
     display: flex; flex-direction: column;
-    gap: 6px;
+    gap: clamp(4px, 0.4vw, 10px);
   }
   .ps-cpw-field-label {
-    font-size: 10px; font-weight: 700;
+    font-size: clamp(9px, 0.62vw, 12px);
+    font-weight: 700;
     letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
@@ -4527,8 +4529,10 @@ const STYLES = `
     background: transparent; border: none;
     border-bottom: 1px solid var(--ps-border-color);
     color: var(--ps-text-primary);
-    font-family: inherit; font-size: 18px; font-weight: 500;
-    padding: 6px 0 8px;
+    font-family: inherit;
+    font-size: clamp(13px, 0.95vw, 18px);
+    font-weight: 500;
+    padding: clamp(4px, 0.4vw, 10px) 0 clamp(6px, 0.55vw, 12px);
     outline: none;
     transition: border-color 0.15s;
   }
@@ -4566,29 +4570,31 @@ const STYLES = `
 
   .ps-cpw-field-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 24px;
+    grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 11vw, 220px), 1fr));
+    gap: clamp(14px, 1.2vw, 28px);
   }
 
   /* Two-column split: inputs stacked left, photo right */
   .ps-cpw-split {
     display: grid;
-    grid-template-columns: 1fr 280px;
-    gap: 28px;
+    grid-template-columns: 1fr clamp(180px, 14vw, 320px);
+    gap: clamp(16px, 1.4vw, 32px);
     align-items: start;
   }
   .ps-cpw-split-left {
-    display: flex; flex-direction: column; gap: 22px;
+    display: flex; flex-direction: column;
+    gap: clamp(14px, 1.2vw, 24px);
     min-width: 0;
   }
   .ps-cpw-split-right {
-    display: flex; flex-direction: column; gap: 8px;
+    display: flex; flex-direction: column;
+    gap: clamp(6px, 0.55vw, 12px);
     min-width: 0;
   }
   .ps-cpw-error {
-    font-size: 12px;
+    font-size: clamp(10px, 0.72vw, 13px);
     color: var(--ps-error-color);
-    margin-top: -6px;
+    margin-top: calc(clamp(4px, 0.4vw, 10px) * -1);
   }
 
   /* Optional photo upload (step 1) */
@@ -4644,67 +4650,84 @@ const STYLES = `
     display: flex; align-items: center; justify-content: center;
   }
 
-  /* Step 2 — Silhouette */
+  /* Step 2 — Silhouette (vw-scaled) */
   .ps-cpw-silhouette {
-    display: flex; flex-direction: column; gap: 28px;
+    display: flex; flex-direction: column;
+    gap: clamp(16px, 1.4vw, 32px);
   }
   .ps-cpw-section {
-    display: flex; flex-direction: column; gap: 14px;
+    display: flex; flex-direction: column;
+    gap: clamp(8px, 0.7vw, 16px);
   }
   .ps-cpw-section-head {
-    display: flex; flex-direction: column; gap: 4px;
+    display: flex; flex-direction: column;
+    gap: clamp(2px, 0.2vw, 6px);
   }
   .ps-cpw-section-title {
-    font-size: 11px; font-weight: 700;
+    font-size: clamp(10px, 0.72vw, 14px);
+    font-weight: 700;
     letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-primary);
   }
   .ps-cpw-section-sub {
-    font-size: 12px; font-weight: 400;
+    font-size: clamp(10px, 0.7vw, 13px);
+    font-weight: 400;
     color: var(--ps-text-muted);
   }
   .ps-cpw-card-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
+    gap: clamp(8px, 0.75vw, 16px);
+    /* Inside a flex parent (ProgressiveStep with flex:1), let the row
+       claim leftover vertical space so the cards stretch to fill it. */
+    flex: 1; min-height: 0;
   }
   .ps-cpw-bra-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 12px;
+    gap: clamp(8px, 0.75vw, 16px);
   }
   .ps-cpw-bra-field {
-    display: flex; flex-direction: column; gap: 6px;
+    display: flex; flex-direction: column;
+    gap: clamp(4px, 0.4vw, 10px);
   }
   .ps-cpw-card {
     display: flex; flex-direction: column; align-items: center;
     background: var(--ps-bg-primary);
     border: 2px solid var(--ps-border-subtle);
-    border-radius: 10px;
-    padding: 14px 8px 10px;
+    border-radius: clamp(8px, 0.6vw, 14px);
+    padding: clamp(10px, 0.85vw, 18px) clamp(6px, 0.5vw, 12px) clamp(8px, 0.65vw, 14px);
     cursor: pointer; font-family: inherit;
     transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
+    /* Stretch inside the grid track so all 3 cards in the row fill
+       the available height equally. */
+    min-width: 0; min-height: 0;
   }
   .ps-cpw-card:hover {
     border-color: rgba(33, 84, 239, 0.35);
   }
   .ps-cpw-card.ps-active {
     border-color: var(--ps-accent);
-    box-shadow: 0 6px 16px rgba(33, 84, 239, 0.12);
+    box-shadow: 0 0.4vw 1.1vw rgba(33, 84, 239, 0.16);
     transform: translateY(-1px);
   }
   .ps-cpw-card-thumb {
-    width: 100%; height: 110px;
+    width: 100%;
+    /* Fills whatever space the card has — combined with the card's
+       min-height: 0, this lets the thumb image grow with viewport size
+       and stretch to fill the wizard body. */
+    flex: 1; min-height: 0;
     display: flex; align-items: center; justify-content: center;
     overflow: hidden;
-    margin-bottom: 8px;
+    margin-bottom: clamp(4px, 0.4vw, 10px);
   }
   .ps-cpw-card-thumb img {
     max-width: 100%; max-height: 100%;
     object-fit: contain;
   }
   .ps-cpw-card-label {
-    font-size: 10px; font-weight: 700;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
     letter-spacing: 0.12em; text-transform: uppercase;
     color: var(--ps-text-muted);
   }
@@ -4753,34 +4776,18 @@ const STYLES = `
   .ps-cpw-next-btn:hover { opacity: 0.92; }
   .ps-cpw-next-btn:active { transform: scale(0.98); }
 
-  @media (max-width: 768px) {
-    .ps-cpw-root { gap: 14px; }
-    .ps-cpw-step-head {
-      flex-direction: column; gap: 10px;
-      padding-bottom: 12px;
-    }
-    .ps-cpw-progress { min-width: 0; width: 100%; align-items: flex-start; margin-top: 0; }
-    .ps-cpw-step-title { font-size: 22px; }
-    .ps-cpw-field-grid { grid-template-columns: 1fr; gap: 18px; }
-    .ps-cpw-split { grid-template-columns: 1fr; gap: 18px; }
-    .ps-cpw-photo-preview { max-width: 220px; }
-    .ps-cpw-card-row { gap: 8px; }
-    .ps-cpw-card { padding: 10px 6px 8px; }
-    .ps-cpw-card-thumb { height: 80px; }
-    .ps-cpw-card-label { font-size: 9px; }
-    .ps-cpw-footer { flex-direction: column-reverse; gap: 10px; align-items: stretch; }
-    .ps-cpw-next-btn { width: 100%; padding: 14px; }
-    .ps-cpw-back-btn { text-align: center; }
-    .ps-cpw-method-grid { grid-template-columns: 1fr; }
-    .ps-cpw-method-card { padding: 22px 18px; }
-    .ps-cpw-photo-frame { max-width: 100%; height: 320px; }
-  }
+  /* No wizard-specific @media (max-width: 768px) overrides anymore.
+     Every ps-cpw-* rule is clamp/vw-driven, so the layout shrinks
+     gracefully from 320px → 5000px without a hard breakpoint. */
 
   /* ── Progressive (one-question-at-a-time) flow ── */
   .ps-cpw-progressive {
     display: flex; flex-direction: column;
     gap: clamp(12px, 1vw, 22px);
     padding: clamp(6px, 0.5vw, 12px) 0;
+    /* Fills the wizard body so the card row can stretch vertically */
+    flex: 1; min-height: 0;
+    width: 100%; box-sizing: border-box;
   }
   .ps-cpw-fade-in {
     animation: ps-cpw-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
@@ -4790,74 +4797,158 @@ const STYLES = `
     to   { opacity: 1; transform: translateY(0); }
   }
 
-  /* ── Method picker (initial step) — vw-scaled compact cards ── */
+  /* ── Method picker (initial step) — cards stretch to fill body ── */
   .ps-cpw-method-picker {
     display: flex; flex-direction: column;
     gap: clamp(8px, 0.7vw, 14px);
     padding: clamp(4px, 0.4vw, 10px) 0;
     flex: 1; min-height: 0;
     width: 100%; box-sizing: border-box;
-    justify-content: center;
   }
   .ps-cpw-method-intro { display: none; }
+  /* Grid claims the picker's leftover height so the cards inside
+     stretch vertically to fill it. */
   .ps-cpw-method-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: clamp(8px, 0.75vw, 16px);
     width: 100%; max-width: 100%;
     box-sizing: border-box;
+    flex: 1; min-height: 0;
   }
+  /* ── Editorial method card ──
+     Layered composition: tinted illustration zone on top, content block
+     on bottom with eyebrow / title / description / arrow. A large
+     corner number watermark gives each card a unique editorial feel. */
   .ps-cpw-method-card {
+    position: relative;
     display: flex; flex-direction: column; align-items: stretch;
     gap: 0;
-    min-width: 0;
+    min-width: 0; min-height: 0;
     width: 100%; max-width: 100%;
     box-sizing: border-box;
     background: var(--ps-bg-primary);
-    border: 1.5px solid var(--ps-border-subtle);
-    border-radius: clamp(8px, 0.6vw, 14px);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: clamp(10px, 0.75vw, 16px);
     overflow: hidden;
     cursor: pointer; font-family: inherit; text-align: left;
-    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
+    transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
+    box-shadow: 0 0.1vw 0.4vw rgba(20, 30, 60, 0.04);
+  }
+  .ps-cpw-method-card::before {
+    /* Thin top accent bar that lights up on hover */
+    content: ""; position: absolute; top: 0; left: 0; right: 0;
+    height: clamp(2px, 0.15vw, 4px);
+    background: var(--ps-accent);
+    transform: scaleX(0); transform-origin: left center;
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+    z-index: 3;
   }
   .ps-cpw-method-card:hover {
     border-color: var(--ps-accent);
-    transform: translateY(-1px);
-    box-shadow: 0 0.4vw 1.2vw rgba(33, 84, 239, 0.10);
+    transform: translateY(-2px);
+    box-shadow: 0 0.6vw 1.6vw rgba(33, 84, 239, 0.14);
   }
-  /* Wide short illustration strip at the top — keeps cards compact
-     and scales proportionally with viewport width. */
+  .ps-cpw-method-card:hover::before { transform: scaleX(1); }
+
+  /* Big editorial number watermark in the top-right corner */
+  .ps-cpw-method-num {
+    position: absolute;
+    top: clamp(8px, 0.7vw, 14px);
+    right: clamp(10px, 0.85vw, 18px);
+    z-index: 2;
+    font-family: inherit;
+    font-size: clamp(20px, 1.7vw, 32px);
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: -0.04em;
+    color: var(--ps-text-primary);
+    opacity: 0.10;
+    pointer-events: none;
+    transition: color 0.22s, opacity 0.22s;
+  }
+  .ps-cpw-method-card:hover .ps-cpw-method-num {
+    color: var(--ps-accent);
+    opacity: 0.30;
+  }
+
+  /* Illustration zone — tinted background, image fills it */
   .ps-cpw-method-img {
+    position: relative;
     width: 100%;
-    height: clamp(56px, 4.5vw, 100px);
-    flex-shrink: 0;
-    background: var(--ps-bg-secondary);
+    flex: 1; min-height: 0;
+    background:
+      radial-gradient(ellipse at 50% 60%, rgba(33, 84, 239, 0.06) 0%, transparent 70%),
+      var(--ps-bg-secondary);
     display: flex; align-items: center; justify-content: center;
-    border-bottom: 1px solid var(--ps-border-subtle);
-    padding: clamp(4px, 0.4vw, 10px);
+    padding: clamp(10px, 0.85vw, 18px);
     box-sizing: border-box;
   }
   .ps-cpw-method-img img {
-    width: auto; height: 100%;
-    max-width: 100%;
+    width: 100%; height: 100%;
+    max-width: 100%; max-height: 100%;
     object-fit: contain;
     display: block;
+    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  .ps-cpw-method-card:hover .ps-cpw-method-img img {
+    transform: scale(1.04);
   }
+
+  /* Content block — eyebrow, title, description, arrow */
   .ps-cpw-method-text {
-    display: flex; flex-direction: column; gap: clamp(2px, 0.15vw, 4px);
-    padding: clamp(6px, 0.55vw, 12px) clamp(8px, 0.7vw, 14px) clamp(8px, 0.7vw, 14px);
+    position: relative;
+    display: flex; flex-direction: column;
+    gap: clamp(3px, 0.25vw, 6px);
+    padding: clamp(10px, 0.85vw, 18px) clamp(12px, 1vw, 20px) clamp(12px, 1vw, 20px);
     width: 100%; box-sizing: border-box;
+    border-top: 1px solid var(--ps-border-subtle);
+    background: var(--ps-bg-primary);
+  }
+  .ps-cpw-method-eyebrow {
+    font-size: clamp(8px, 0.55vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ps-accent);
   }
   .ps-cpw-method-title {
-    font-size: clamp(11px, 0.78vw, 15px);
+    font-size: clamp(13px, 0.92vw, 18px);
     font-weight: 700;
     color: var(--ps-text-primary);
-    letter-spacing: -0.005em;
+    letter-spacing: -0.012em;
+    line-height: 1.25;
   }
   .ps-cpw-method-desc {
-    font-size: clamp(9px, 0.65vw, 12px);
-    line-height: 1.4;
+    font-size: clamp(10px, 0.7vw, 13px);
+    line-height: 1.45;
     color: var(--ps-text-muted);
+    /* Cap at 2 lines so cards stay symmetric */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  /* Arrow indicator — bottom right of the content block */
+  .ps-cpw-method-arrow {
+    position: absolute;
+    right: clamp(12px, 1vw, 20px);
+    bottom: clamp(12px, 1vw, 20px);
+    width: clamp(22px, 1.6vw, 32px);
+    height: clamp(22px, 1.6vw, 32px);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--ps-bg-secondary);
+    color: var(--ps-text-secondary);
+    transition: background 0.22s, color 0.22s, transform 0.22s;
+  }
+  .ps-cpw-method-arrow svg {
+    width: 55%; height: 55%;
+  }
+  .ps-cpw-method-card:hover .ps-cpw-method-arrow {
+    background: var(--ps-accent);
+    color: #FFFFFF;
+    transform: translateX(0.2vw);
   }
   /* Wizard reuses the SDK basics screen's .ps-bp-inline-* row styles for
      parity. This wrapper just gives them a consistent gap and centers
@@ -8908,10 +8999,16 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               setManualStep("identity");
             },
             children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-cpw-method-num", children: "01" }),
               /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-img", children: /* @__PURE__ */ jsx("img", { src: methodManualImg, alt: t("Manual measurement illustration") }) }),
               /* @__PURE__ */ jsxs("div", { className: "ps-cpw-method-text", children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-eyebrow", children: t("Quick Setup") }),
                 /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-title", children: t("Measure manually") }),
-                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Enter height, weight and answer quick body shape questions.") })
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Enter height, weight and answer quick body shape questions.") }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
+                ] }) })
               ] })
             ]
           }
@@ -8925,10 +9022,16 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               setMode("image");
             },
             children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-cpw-method-num", children: "02" }),
               /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-img", children: /* @__PURE__ */ jsx("img", { src: methodPhotoImg, alt: t("Photo analysis illustration") }) }),
               /* @__PURE__ */ jsxs("div", { className: "ps-cpw-method-text", children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-eyebrow", children: t("AI Powered") }),
                 /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-title", children: t("Analyze by photo") }),
-                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Upload a full-body photo. Our AI computes every measurement.") })
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Upload a full-body photo. Our AI computes every measurement.") }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "12 5 19 12 12 19" })
+                ] }) })
               ] })
             ]
           }