@primestyleai/tryon 5.10.134 → 5.10.136

package/dist/react/views/MultiSectionMobile.d.ts

@@ -24,6 +24,9 @@ export interface MultiSectionMobileProps {
     onSelectSection: (name: string) => void;
     onTryOn: () => void;
     tryOnProcessing?: boolean;
+    /** Epoch ms timestamp the try-on request started — drives the
+     *  TryOnGenerationBadge's progress + ETA copy. */
+    tryOnStartedAt?: number | null;
     /** When set, the image area shows the try-on result instead of productImage. */
     resultImageUrl?: string | null;
     /** Try-on has finished and result is ready. Switches the bottom CTA into
@@ -44,4 +47,4 @@ export interface MultiSectionMobileProps {
     onImageLoad?: (e: React.SyntheticEvent<HTMLImageElement>) => void;
     t: TranslateFn;
 }
-export declare function MultiSectionMobile({ productImage, productTitle, sizingResult, sizeGuide, sectionEntries, pendingCustomSizes, onSelectSection, onTryOn, tryOnProcessing, resultImageUrl, tryOnDone, onTryAgain, onClose, overlayNode, showLines, onToggleLines, onImageLoad, t, }: MultiSectionMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSectionMobile({ productImage, productTitle, sizingResult, sizeGuide, sectionEntries, pendingCustomSizes, onSelectSection, onTryOn, tryOnProcessing, tryOnStartedAt, resultImageUrl, tryOnDone, onTryAgain, onClose, overlayNode, showLines, onToggleLines, onImageLoad, t, }: MultiSectionMobileProps): import("react/jsx-runtime").JSX.Element;

package/dist/storefront/primestyle-tryon.js

@@ -11563,6 +11563,22 @@ const STYLES$1 = `
   @keyframes ps-tryon-badge-spin {
     to { transform: rotate(360deg); }
   }
+  /* Mobile sizing for the try-on badge — desktop's max-width: 420px lives
+     inside a roughly 360 px image hero, leaving the pill awkwardly clipped.
+     Stretch it edge-to-edge with smaller text so it always fits. */
+  @media (max-width: 768px) {
+    .ps-tryon-badge {
+      left: 12px; right: 12px; bottom: 12px;
+      max-width: none;
+      padding: 12px 14px;
+      gap: 8px;
+      border-radius: 12px;
+    }
+    .ps-tryon-badge-row { gap: 10px; }
+    .ps-tryon-badge-title { font-size: 13px; }
+    .ps-tryon-badge-pct { font-size: 11px; padding: 3px 9px; }
+    .ps-tryon-badge-foot { font-size: 11px; gap: 8px; }
+  }
 
   /* ── Product photo strip (single-garment, below the size card) ──
      Three thumbnails per slide, evenly spaced, auto-advances. Lives at
@@ -15316,9 +15332,12 @@ const STYLES$1 = `
     text-align: center; padding: 4px 12px;
     min-height: 64px;
     /* Lock width so the cycling stage text (shorter/longer strings every
-       ~2s) doesn't reflow the sibling TryOnProgress bar. */
+       ~2s) doesn't reflow the sibling TryOnProgress bar. align-self:
+       center centers the 320px container inside the flex column — without
+       it the container sat at the left edge of the screen on mobile. */
     width: 320px;
     max-width: 100%;
+    align-self: center;
     overflow: hidden;
   }
   .ps-msc-stage-slot {
@@ -15403,11 +15422,23 @@ const STYLES$1 = `
   .ps-msr-fit-toggle[aria-pressed="true"] {
     background: var(--ps-accent); color: #FFFFFF;
   }
-  /* Bottom action row when try-on finished — Try Again + Continue Shopping */
+  /* Bottom action row when try-on finished — Try Again + Continue Shopping.
+     min-width: 0 lets each button actually shrink to share the row equally
+     on narrow viewports; white-space: nowrap stops "Continue Shopping"
+     from wrapping to a second line. */
   .ps-msr-bottom-row {
-    display: flex; gap: 10px; align-items: stretch;
+    display: flex; gap: 8px; align-items: stretch;
+  }
+  .ps-msr-bottom-row .ps-msr-tryon-cta {
+    flex: 1 1 0; min-width: 0;
+    padding: 14px 12px; font-size: 13px;
+    white-space: nowrap;
+  }
+  @media (max-width: 360px) {
+    .ps-msr-bottom-row .ps-msr-tryon-cta {
+      padding: 12px 10px; font-size: 12px;
+    }
   }
-  .ps-msr-bottom-row .ps-msr-tryon-cta { flex: 1; }
   .ps-msr-tryon-cta.ps-secondary {
     background: transparent;
     color: var(--ps-text-primary);
@@ -17477,6 +17508,11 @@ const STYLES$1 = `
 
   /* Big product / try-on image */
   .ps-msd-image {
+    /* position: relative is required so the absolute children
+       (.ps-msr-fit-toggle, .ps-tryon-badge) anchor to the image instead of
+       the viewport. Without it the Show Fit pill rendered bottom-left of
+       the screen on mobile. */
+    position: relative;
     width: 100%; height: 420px;
     border-radius: 12px; overflow: hidden;
     background: var(--ps-bg-secondary);
@@ -17517,6 +17553,12 @@ const STYLES$1 = `
     letter-spacing: 0.05em;
     color: var(--ps-text-muted);
   }
+  /* Mobile: 56 px overflows for compound labels like
+     "MISSY 12 / Standard / Length 61". Cap at 36 px. */
+  @media (max-width: 768px) {
+    .ps-msd-card-size { font-size: 36px; letter-spacing: -0.015em; }
+    .ps-msd-card-size-meta { font-size: 11px; }
+  }
   .ps-msd-card-divider {
     height: 1px; background: var(--ps-border-subtle);
     margin: 6px 0;
@@ -17885,6 +17927,34 @@ const STYLES$1 = `
     color: var(--ps-accent);
   }
 
+  /* Mobile px-based override — desktop rules use vw units which collapse
+     to 1–4 px on a 375 px viewport. */
+  @media (max-width: 768px) {
+    .ps-bp-mini-select-trigger {
+      padding: 10px 14px;
+      font-size: 14px;
+      border-radius: 8px;
+      gap: 8px;
+      min-width: 0;
+    }
+    .ps-bp-mini-select-arrow { font-size: 10px; }
+    .ps-bp-mini-select-panel {
+      max-height: 240px;
+      border-radius: 10px;
+      padding: 4px;
+      box-shadow:
+        0 4px 12px rgba(15, 23, 42, 0.10),
+        0 12px 32px rgba(15, 23, 42, 0.16);
+    }
+    .ps-bp-mini-select[data-dir="down"] .ps-bp-mini-select-panel { top: calc(100% + 6px); }
+    .ps-bp-mini-select[data-dir="up"]   .ps-bp-mini-select-panel { bottom: calc(100% + 6px); }
+    .ps-bp-mini-select-item {
+      padding: 10px 12px;
+      font-size: 14px;
+      border-radius: 6px;
+    }
+  }
+
   .ps-bp-bra-region-wrap { position: relative; z-index: 100; }
   .ps-bp-bra-region-trigger {
     display: flex; align-items: center; gap: 0.35vw;
@@ -19039,6 +19109,10 @@ function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t: t2 }) {
   ] });
 }
 const SKELETON_CONNECTIONS$1 = [
+  // Head → torso. Bridges the gap between the nose dot and the shoulder
+  // line — without these the head reads as floating above the body.
+  ["nose", "leftShoulder"],
+  ["nose", "rightShoulder"],
   ["leftShoulder", "rightShoulder"],
   ["leftShoulder", "leftElbow"],
   ["leftElbow", "leftWrist"],
@@ -19052,6 +19126,14 @@ const SKELETON_CONNECTIONS$1 = [
   ["rightHip", "rightKnee"],
   ["rightKnee", "rightAnkle"]
 ];
+function isVisible(p2) {
+  if (!p2 || typeof p2 !== "object") return false;
+  const pt2 = p2;
+  if (typeof pt2.x !== "number" || typeof pt2.y !== "number") return false;
+  if (typeof pt2.visibility === "number" && pt2.visibility < 0.3) return false;
+  if (pt2.x < 1e-3 && pt2.y < 1e-3) return false;
+  return true;
+}
 function MobileSkeleton({ landmarks, w: w2, h }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
@@ -19063,7 +19145,7 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
         SKELETON_CONNECTIONS$1.map(([a, b], i) => {
           const pa2 = landmarks[a];
           const pb2 = landmarks[b];
-          if (!pa2 || !pb2) return null;
+          if (!isVisible(pa2) || !isVisible(pb2)) return null;
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             "line",
             {
@@ -19073,14 +19155,12 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
               y2: pb2.y * h,
               stroke: "rgba(100,210,255,0.9)",
               strokeWidth: "4",
-              strokeLinecap: "round",
-              opacity: 0,
-              style: { animation: `ps-msc-fade 0.4s ease ${i * 0.05}s forwards` }
+              strokeLinecap: "round"
             },
             `l-${i}`
           );
         }),
-        Object.entries(landmarks).filter(([, v2]) => v2 && typeof v2 === "object" && typeof v2.x === "number" && typeof v2.y === "number").map(([key, v2], i) => {
+        Object.entries(landmarks).filter(([, v2]) => isVisible(v2)).map(([key, v2]) => {
           const p2 = v2;
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19088,10 +19168,8 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
               {
                 cx: p2.x * w2,
                 cy: p2.y * h,
-                r: 10,
-                fill: "rgba(100,210,255,0.25)",
-                opacity: 0,
-                style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards` }
+                r: 14,
+                fill: "rgba(100,210,255,0.30)"
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -19099,10 +19177,8 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
               {
                 cx: p2.x * w2,
                 cy: p2.y * h,
-                r: 6,
-                fill: "rgba(100,210,255,0.95)",
-                opacity: 0,
-                style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards` }
+                r: 9,
+                fill: "rgba(100,210,255,0.95)"
               }
             )
           ] }, key);
@@ -19192,6 +19268,99 @@ function MobileScanningView({
     ) })
   ] });
 }
+const TARGET_SECONDS = 22;
+function TryOnGenerationBadge({
+  tryOnStartedAt,
+  t: t2
+}) {
+  const [, force] = reactExports.useState(0);
+  reactExports.useEffect(() => {
+    if (tryOnStartedAt == null) return;
+    const id2 = setInterval(() => force((v2) => v2 + 1), 200);
+    return () => clearInterval(id2);
+  }, [tryOnStartedAt]);
+  if (tryOnStartedAt == null) return null;
+  const elapsed = (Date.now() - tryOnStartedAt) / 1e3;
+  const pct = Math.min(95, elapsed / TARGET_SECONDS * 100);
+  const pctRounded = Math.round(pct);
+  const remaining = Math.max(0, TARGET_SECONDS - Math.floor(elapsed));
+  const etaText = elapsed >= TARGET_SECONDS ? t2("almost done") : `~${remaining}s ${t2("left")}`;
+  const statuses = [
+    t2("Preparing your image"),
+    t2("Analyzing body proportions"),
+    t2("Mapping garment to body"),
+    t2("Refining drape and shadows"),
+    t2("Almost done")
+  ];
+  const stepIdx = Math.min(
+    statuses.length - 1,
+    Math.floor(elapsed / TARGET_SECONDS * statuses.length)
+  );
+  const status = statuses[stepIdx];
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-badge", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-badge-row", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-badge-spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: "22", height: "22", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "ps-tryon-badge-grad", x1: "0", y1: "0", x2: "1", y2: "1", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#3B82F6" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#2563EB" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "rgba(59,130,246,0.18)", strokeWidth: "2.4" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9",
+            fill: "none",
+            stroke: "url(#ps-tryon-badge-grad)",
+            strokeWidth: "2.4",
+            strokeLinecap: "round",
+            strokeDasharray: "56.5",
+            strokeDashoffset: "38"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-badge-title", children: t2("Generating your look...") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-badge-pct", children: [
+        pctRounded,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-badge-bar", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-badge-bar-fill", style: { width: `${pctRounded}%` } }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-badge-foot", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-badge-status", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-badge-status-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6", y1: "10", x2: "6", y2: "14" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "6", x2: "10", y2: "18" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "9", x2: "14", y2: "15" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18", y1: "11", x2: "18", y2: "13" })
+        ] }) }),
+        status
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-badge-eta", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "svg",
+          {
+            width: "11",
+            height: "11",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "12 6 12 12 16 14" })
+            ]
+          }
+        ),
+        etaText
+      ] })
+    ] })
+  ] });
+}
 function garmentIconForSection$1(name) {
   const n2 = name.toLowerCase();
   if (n2.includes("jacket") || n2.includes("blazer") || n2.includes("coat")) return garmentJacketImg;
@@ -19223,6 +19392,7 @@ function MultiSectionMobile({
   onSelectSection,
   onTryOn,
   tryOnProcessing,
+  tryOnStartedAt,
   resultImageUrl,
   tryOnDone,
   onTryAgain,
@@ -19268,6 +19438,7 @@ function MultiSectionMobile({
             }
           ),
           showLines && overlayNode,
+          tryOnProcessing && tryOnStartedAt != null && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt, t: t2 }),
           showingTryOn && onToggleLines && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
@@ -19388,99 +19559,6 @@ function MultiSectionMobile({
     sizeGuide ? null : null
   ] });
 }
-const TARGET_SECONDS = 22;
-function TryOnGenerationBadge({
-  tryOnStartedAt,
-  t: t2
-}) {
-  const [, force] = reactExports.useState(0);
-  reactExports.useEffect(() => {
-    if (tryOnStartedAt == null) return;
-    const id2 = setInterval(() => force((v2) => v2 + 1), 200);
-    return () => clearInterval(id2);
-  }, [tryOnStartedAt]);
-  if (tryOnStartedAt == null) return null;
-  const elapsed = (Date.now() - tryOnStartedAt) / 1e3;
-  const pct = Math.min(95, elapsed / TARGET_SECONDS * 100);
-  const pctRounded = Math.round(pct);
-  const remaining = Math.max(0, TARGET_SECONDS - Math.floor(elapsed));
-  const etaText = elapsed >= TARGET_SECONDS ? t2("almost done") : `~${remaining}s ${t2("left")}`;
-  const statuses = [
-    t2("Preparing your image"),
-    t2("Analyzing body proportions"),
-    t2("Mapping garment to body"),
-    t2("Refining drape and shadows"),
-    t2("Almost done")
-  ];
-  const stepIdx = Math.min(
-    statuses.length - 1,
-    Math.floor(elapsed / TARGET_SECONDS * statuses.length)
-  );
-  const status = statuses[stepIdx];
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-badge", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-badge-row", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-badge-spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: "22", height: "22", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("linearGradient", { id: "ps-tryon-badge-grad", x1: "0", y1: "0", x2: "1", y2: "1", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "0%", stopColor: "#3B82F6" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("stop", { offset: "100%", stopColor: "#2563EB" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "rgba(59,130,246,0.18)", strokeWidth: "2.4" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "circle",
-          {
-            cx: "12",
-            cy: "12",
-            r: "9",
-            fill: "none",
-            stroke: "url(#ps-tryon-badge-grad)",
-            strokeWidth: "2.4",
-            strokeLinecap: "round",
-            strokeDasharray: "56.5",
-            strokeDashoffset: "38"
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-badge-title", children: t2("Generating your look...") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-badge-pct", children: [
-        pctRounded,
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-badge-bar", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-badge-bar-fill", style: { width: `${pctRounded}%` } }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-badge-foot", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-badge-status", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-badge-status-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6", y1: "10", x2: "6", y2: "14" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "6", x2: "10", y2: "18" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "9", x2: "14", y2: "15" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18", y1: "11", x2: "18", y2: "13" })
-        ] }) }),
-        status
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-badge-eta", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "svg",
-          {
-            width: "11",
-            height: "11",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "12 6 12 12 16 14" })
-            ]
-          }
-        ),
-        etaText
-      ] })
-    ] })
-  ] });
-}
 const PER_SLIDE = 3;
 const CYCLE_MS = 4e3;
 function ProductPhotoCarouselCard({
@@ -20253,6 +20331,7 @@ function SectionDetailView({
           }
         ),
         showLines && overlayNode,
+        tryOnProcessing && tryOnStartedAt != null && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt, t: t2 }),
         isTryOnImage && onToggleLines && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -21295,6 +21374,7 @@ function SizeResultView({
               setShowPhotoGuide(true);
             },
             tryOnProcessing,
+            tryOnStartedAt,
             resultImageUrl,
             tryOnDone: !!resultImageUrl && !tryOnProcessing,
             onTryAgain: () => {
@@ -22885,7 +22965,7 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
   const CUP_OPTIONS_US2 = ["AA", "A", "B", "C", "D", "DD/E", "DDD/F", "G", "H", "I", "J"];
   const isWomen = gender === "female";
   const imgs = isWomen ? BODY_IMAGES.female : BODY_IMAGES.male;
-  const manualStepOrder = isWomen ? ["identity", "stomach", "seat", "hips", "bra"] : ["identity", "chest", "stomach", "seat"];
+  const manualStepOrder = isWomen ? ["identity", "stomach", "seat", "hips"] : ["identity", "chest", "stomach", "seat"];
   const manualStepIdx = manualStepOrder.indexOf(manualStep);
   const manualStepCount = manualStepOrder.length;
   const isLastManualStep = manualStepIdx === manualStepCount - 1;
@@ -22937,6 +23017,10 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
       setError(t2("Please enter a valid age"));
       return false;
     }
+    if (isWomen && (!bandSize || !cupSize)) {
+      setError(t2("Please select your bra band and cup size"));
+      return false;
+    }
     setError("");
     return true;
   };
@@ -23327,6 +23411,63 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
               ),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-inline-unit", children: t2("years") })
             ] })
+          ] }),
+          isWomen && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: inlineBraWrapRef, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-inline-row", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-inline-label", children: t2("BRA REGION") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-inline-input-group", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                MiniSelect$1,
+                {
+                  value: braSizeRegion,
+                  options: Object.keys(BAND_SIZES$1),
+                  isOpen: inlineBraOpen === "region",
+                  onToggle: () => setInlineBraOpen(inlineBraOpen === "region" ? null : "region"),
+                  onSelect: (v2) => {
+                    setBraSizeRegion(v2);
+                    setBandSize(null);
+                    setCupSize(null);
+                    setInlineBraOpen(null);
+                    setError("");
+                  }
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-inline-row", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-inline-label", children: t2("BAND") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-inline-input-group", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                MiniSelect$1,
+                {
+                  value: bandSize,
+                  options: BAND_SIZES$1[braSizeRegion] || BAND_SIZES$1.US,
+                  placeholder: "—",
+                  isOpen: inlineBraOpen === "band",
+                  onToggle: () => setInlineBraOpen(inlineBraOpen === "band" ? null : "band"),
+                  onSelect: (v2) => {
+                    setBandSize(v2);
+                    setInlineBraOpen(null);
+                    setError("");
+                  }
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-inline-row", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-inline-label", children: t2("CUP") }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-inline-input-group", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                MiniSelect$1,
+                {
+                  value: cupSize,
+                  options: CUP_OPTIONS_US2,
+                  placeholder: "—",
+                  isOpen: inlineBraOpen === "cup",
+                  onToggle: () => setInlineBraOpen(inlineBraOpen === "cup" ? null : "cup"),
+                  onSelect: (v2) => {
+                    setCupSize(v2);
+                    setInlineBraOpen(null);
+                    setError("");
+                  }
+                }
+              ) })
+            ] })
           ] })
         ] }),
         error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-error", children: error })
@@ -25490,7 +25631,8 @@ function BodyProfileView({
     setAge("");
     setBandSize(null);
     setCupSize(null);
-  }, [handleRemovePhoto]);
+    onStartFresh?.();
+  }, [handleRemovePhoto, onStartFresh]);
   reactExports.useEffect(() => {
     const profilePhoto = activeProfile?.photoBase64;
     const profileId = activeProfile?.id ?? null;
@@ -26313,6 +26455,15 @@ function BodyProfileView({
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-loaded-pill-text", children: t2("Loaded from profile") }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-bp-loaded-pill-clear", onClick: handleClearFromProfile, children: t2("Clear") })
             ] }) }),
+            hasActiveProfileWithMeasurements && activeProfileName && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "ps-bp-profile-hint", style: { textAlign: "center", margin: "0 0 0.5vw" }, children: [
+              t2("Using"),
+              " ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx("strong", { children: activeProfileName }),
+              onStartFresh && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                " · ",
+                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-bp-profile-hint-link", onClick: handleClearFromProfile, children: t2("start fresh") })
+              ] })
+            ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-inline-fields", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-inline-row", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-inline-label", children: t2("HEIGHT") }),

package/package.json

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