@primestyleai/tryon 5.10.135 → 5.10.137

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

@@ -19,8 +19,10 @@ interface MobileScanningViewProps {
     productDescription?: string;
     /** Optional cancel handler shown as a text link under the cards. */
     onCancelTryOn?: () => void;
-    onSwitchToManual: () => void;
+    /** No longer rendered (tabs removed mid-scan), kept for backwards-compat
+     *  with the photo-step caller that passes it down. */
+    onSwitchToManual?: () => void;
     t: TranslateFn;
 }
-export declare function MobileScanningView({ previewUrl, productImage, bodyLandmarks, sizingDone, tryOnProcessing, productMaterial, productDescription, onCancelTryOn, onSwitchToManual, t, }: MobileScanningViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileScanningView({ previewUrl, productImage, bodyLandmarks, sizingDone, tryOnProcessing, productMaterial, productDescription, onCancelTryOn, t, }: MobileScanningViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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,18 @@ const STYLES$1 = `
     letter-spacing: 0.05em;
     color: var(--ps-text-muted);
   }
+  /* Mobile: long labels like "MISSY 12 / Standard" wrap to a second line
+     at 36 px in a ~280 px card. Drop further to 28 px and let the size
+     pill take the full card width so wrapping doesn't strand the meta
+     value awkwardly to the side. */
+  @media (max-width: 768px) {
+    .ps-msd-card-size {
+      font-size: 28px;
+      letter-spacing: -0.015em;
+      line-height: 1.1;
+    }
+    .ps-msd-card-size-meta { font-size: 11px; }
+  }
   .ps-msd-card-divider {
     height: 1px; background: var(--ps-border-subtle);
     margin: 6px 0;
@@ -17885,6 +17933,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;
@@ -18998,47 +19074,11 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
-function RulerIcon() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
-  ] });
-}
-function ScanIcon() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3" })
-  ] });
-}
-function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t: t2 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
-        onClick: onSwitchToManual,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(RulerIcon, {}),
-          t2("MANUAL FIT")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
-        onClick: onSwitchToScan,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ScanIcon, {}),
-          t2("AI SCAN")
-        ]
-      }
-    )
-  ] });
-}
 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 +19092,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 +19111,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 +19121,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 +19134,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 +19143,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);
@@ -19120,7 +19162,8 @@ function MobileScanningView({
   productMaterial,
   productDescription,
   onCancelTryOn,
-  onSwitchToManual,
+  // onSwitchToManual is intentionally not destructured — bottom tabs are
+  // hidden during analysis and the prop is kept on the type for callers.
   t: t2
 }) {
   const displayImage = previewUrl || productImage || "";
@@ -19179,17 +19222,100 @@ function MobileScanningView({
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
     ] }, stageIdx) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MobileBottomTabs,
-      {
-        mode: "scan",
-        onSwitchToManual,
-        onSwitchToScan: () => {
-        },
-        t: t2
-      }
-    ) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" })
+  ] });
+}
+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) {
@@ -19223,6 +19349,7 @@ function MultiSectionMobile({
   onSelectSection,
   onTryOn,
   tryOnProcessing,
+  tryOnStartedAt,
   resultImageUrl,
   tryOnDone,
   onTryAgain,
@@ -19268,6 +19395,7 @@ function MultiSectionMobile({
             }
           ),
           showLines && overlayNode,
+          tryOnProcessing && tryOnStartedAt != null && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt, t: t2 }),
           showingTryOn && onToggleLines && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "button",
             {
@@ -19388,99 +19516,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 +20288,7 @@ function SectionDetailView({
           }
         ),
         showLines && overlayNode,
+        tryOnProcessing && tryOnStartedAt != null && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt, t: t2 }),
         isTryOnImage && onToggleLines && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -20437,14 +20473,14 @@ function SectionDetailView({
         " ",
         t2("based on your measurements and the garment's tailoring chart.")
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: 10, padding: "12px 0 4px", flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: 10, padding: "12px 0 4px", flexShrink: 0, alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
             type: "button",
             className: "ps-bp-back-btn",
             onClick: onBack,
-            style: { fontSize: 13, padding: "10px 6px" },
+            style: { fontSize: 13, padding: "10px 6px", flexShrink: 0 },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
               " ",
@@ -20452,7 +20488,6 @@ function SectionDetailView({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: 1 } }),
         onTryOn ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -20460,7 +20495,8 @@ function SectionDetailView({
             onClick: onTryOn,
             disabled: tryOnProcessing,
             style: {
-              flex: 1,
+              flex: "1 1 0",
+              minWidth: 0,
               padding: "12px 16px",
               borderRadius: 10,
               background: "var(--ps-accent)",
@@ -20474,7 +20510,8 @@ function SectionDetailView({
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              gap: 6
+              gap: 6,
+              whiteSpace: "nowrap"
             },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, { size: 14 }),
@@ -20487,7 +20524,8 @@ function SectionDetailView({
             type: "button",
             onClick: onBack,
             style: {
-              flex: 1,
+              flex: "1 1 0",
+              minWidth: 0,
               padding: "12px 16px",
               borderRadius: 10,
               background: "var(--ps-accent)",
@@ -20500,7 +20538,8 @@ function SectionDetailView({
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              gap: 6
+              gap: 6,
+              whiteSpace: "nowrap"
             },
             children: [
               continueLabel || t2("Continue"),
@@ -21295,6 +21334,7 @@ function SizeResultView({
               setShowPhotoGuide(true);
             },
             tryOnProcessing,
+            tryOnStartedAt,
             resultImageUrl,
             tryOnDone: !!resultImageUrl && !tryOnProcessing,
             onTryAgain: () => {
@@ -24708,6 +24748,46 @@ function ResultView({ setView }) {
   }, []);
   return null;
 }
+function RulerIcon() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
+  ] });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t: t2 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
+        onClick: onSwitchToManual,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(RulerIcon, {}),
+          t2("MANUAL FIT")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
+        onClick: onSwitchToScan,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ScanIcon, {}),
+          t2("AI SCAN")
+        ]
+      }
+    )
+  ] });
+}
 function CameraSmallIcon({ size = 16 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
     /* @__PURE__ */ jsxRuntimeExports.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" }),

package/package.json

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