@primestyleai/tryon 5.10.4 → 5.10.6

package/dist/react/index.js

@@ -2113,7 +2113,10 @@ const STYLES = `
      MobileScanningView — row of ring + bar + percent, same tokens. */
   .ps-tryon-progress-wrap {
     display: flex; align-items: center; gap: 12px;
-    width: 100%; max-width: 360px; margin-top: 18px;
+    /* Fixed logical width so neither the ring nor the bar reflow when the
+       sibling stage text changes character count each tick. */
+    width: min(320px, calc(100% - 24px));
+    margin-top: 18px;
   }
   .ps-tryon-progress-wrap .ps-tryon-progress-bar-wrap {
     flex: 1; height: 6px; border-radius: 4px; overflow: hidden;
@@ -7715,13 +7718,11 @@ function MobileScanningView({
       ),
       isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
-        /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
-      ] }, stageIdx),
-      tryOnProcessing && /* @__PURE__ */ jsx(MscTryOnProgress, { t })
-    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+    ] }, stageIdx) }),
+    tryOnProcessing && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", padding: "0 16px", width: "100%" }, children: /* @__PURE__ */ jsx(MscTryOnProgress, { t }) }),
     /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
     /* @__PURE__ */ jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsx(
       MobileBottomTabs,
@@ -8825,6 +8826,78 @@ function SectionDetailView({
         backendLength ? ` (${backendLength})` : "",
         " ",
         t("based on your measurements and the garment's tailoring chart.")
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 10, padding: "12px 0 4px", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ps-bp-back-btn",
+            onClick: onBack,
+            style: { fontSize: 13, padding: "10px 6px" },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
+              " ",
+              backLabel || t("Back")
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        onTryOn ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onTryOn,
+            disabled: tryOnProcessing,
+            style: {
+              flex: 1,
+              padding: "12px 16px",
+              borderRadius: 10,
+              background: "var(--ps-accent)",
+              color: "white",
+              border: "none",
+              fontSize: 14,
+              fontWeight: 700,
+              fontFamily: "inherit",
+              cursor: tryOnProcessing ? "default" : "pointer",
+              opacity: tryOnProcessing ? 0.6 : 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6
+            },
+            children: [
+              /* @__PURE__ */ jsx(CameraIcon$1, { size: 14 }),
+              tryOnProcessing ? t("Processing...") : t("Try It On")
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            style: {
+              flex: 1,
+              padding: "12px 16px",
+              borderRadius: 10,
+              background: "var(--ps-accent)",
+              color: "white",
+              border: "none",
+              fontSize: 14,
+              fontWeight: 700,
+              fontFamily: "inherit",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 6
+            },
+            children: [
+              continueLabel || t("Continue"),
+              " →"
+            ]
+          }
+        )
       ] })
     ] }) });
   }
@@ -13109,7 +13182,7 @@ function AccessorySizeView({
         },
         opt.value
       )) }),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1, overflowY: "auto" }, children: [
+      /* @__PURE__ */ jsxs("div", { style: { padding: "0 4%" }, children: [
         fields.map((f) => /* @__PURE__ */ jsxs("div", { className: "ps-bpm-row", children: [
           /* @__PURE__ */ jsx("span", { className: "ps-bpm-label", children: t(f.label).toUpperCase() }),
           /* @__PURE__ */ jsxs("div", { className: "ps-bpm-inline-group", children: [
@@ -13129,8 +13202,9 @@ function AccessorySizeView({
             /* @__PURE__ */ jsx("span", { className: "ps-bpm-unit", children: activeUnitLabel.toLowerCase() })
           ] })
         ] }, f.key)),
-        error && /* @__PURE__ */ jsx("p", { className: "ps-acc-error", style: { padding: "0 4%" }, children: error })
+        error && /* @__PURE__ */ jsx("p", { className: "ps-acc-error", style: { paddingTop: 8 }, children: error })
       ] }),
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 16 } }),
       !disablePhotoUpload && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("div", { className: "ps-bpm-or", children: /* @__PURE__ */ jsx("span", { children: t("or") }) }),
         /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-bpm-upload-link", onClick: () => setStep("photo"), children: [
@@ -13139,7 +13213,6 @@ function AccessorySizeView({
           /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
       /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom", children: [
         /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-bpm-next-btn", onClick: handleManualSubmit, children: [
           t("Find My Size"),
@@ -13713,7 +13786,9 @@ function PrimeStyleTryonInner({
   const [heightUnit, setHeightUnit] = useState(imperial ? "in" : "cm");
   const [weightUnit, setWeightUnit] = useState(imperial ? "lbs" : "kg");
   useEffect(() => {
-    if (detectMeasurementType(productTitle) === "foot") setSizingUnit("cm");
+    const mtype = detectMeasurementType(productTitle);
+    if (mtype === "foot" || mtype === "head") setSizingUnit("cm");
+    else if (mtype === "face") setSizingUnit("mm");
   }, [productTitle]);
   const formRef = useRef({});
   const [formGender, setFormGender] = useState("male");
@@ -14535,7 +14610,12 @@ function PrimeStyleTryonInner({
       setBodyLandmarks(lm);
       return lm;
     }).catch(() => null);
-    const landmarks = await landmarksPromise;
+    const LANDMARK_TIMEOUT_MS = 2500;
+    const landmarks = await Promise.race([
+      landmarksPromise,
+      new Promise((resolve) => setTimeout(() => resolve(null), LANDMARK_TIMEOUT_MS))
+    ]);
+    if (!landmarks) console.log("[ps-sdk] landmarks not ready in", LANDMARK_TIMEOUT_MS, "ms — proceeding without them");
     const payload = {
       method: "photo",
       locale: sizingCountry,