@primestyleai/tryon 5.10.123 → 5.10.124

package/dist/storefront/primestyle-tryon.js

@@ -20113,10 +20113,15 @@ function SectionDetailView({
     if (!details.length) return [];
     const isFromLength = new Set(lengthDetails.map((m2) => m2.measurement));
     if (hasLengthSource) isFromLength.add("Height");
+    const activeLengthLabel = selectedLength || effectiveRecLength;
     return details.map((m2) => {
       if (isFromLength.has(m2.measurement)) {
         const userNum2 = userMeasurements[m2.measurement.toLowerCase()] || pNumFn(m2.userValue);
-        const lookup2 = allSizes?.[displaySize]?.[m2.measurement];
+        const lengthAllSizes = lengthEntry?.secResult?.allSizes;
+        const lookupByLengthEntry = activeLengthLabel ? lengthAllSizes?.[activeLengthLabel]?.[m2.measurement] : void 0;
+        const lookupByLength = activeLengthLabel ? allSizes?.[activeLengthLabel]?.[m2.measurement] : void 0;
+        const lookupBySize = allSizes?.[displaySize]?.[m2.measurement];
+        const lookup2 = lookupByLengthEntry ?? lookupByLength ?? lookupBySize;
         const chartRange2 = lookup2?.chartRange ?? m2.chartRange;
         const fit2 = lookup2?.fit ?? m2.fit ?? "good";
         return {
@@ -20141,7 +20146,7 @@ function SectionDetailView({
         isLength: isDirectional
       };
     });
-  }, [sectionResult, lengthEntry, userMeasurements, renderRaw, allSizes, displaySize]);
+  }, [sectionResult, lengthEntry, userMeasurements, renderRaw, allSizes, displaySize, selectedLength]);
   const goodCount = fitRows.filter(
     (r2) => r2.fit === "good" || r2.fit === "a-bit-tight" || r2.fit === "a-bit-loose"
   ).length;
@@ -21157,14 +21162,19 @@ function SizeResultView({
                   })(),
                   onBack: () => setActiveSection(null),
                   internationalSizes: entry.secResult?.internationalSizes,
-                  productImage: resultImageUrl || productImage,
+                  productImage: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage,
                   productTitle,
                   isMobile: true,
-                  isTryOnImage: !!resultImageUrl,
+                  isTryOnImage: !!resultImageUrl && !tryOnProcessing,
+                  tryOnProcessing,
+                  tryOnStartedAt,
                   showLines,
                   onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
                   onImageLoad: handleImgLoad,
-                  overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  overlayNode: tryOnProcessing ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt: tryOnStartedAt ?? null, t: t2 }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(RegenScanOverlay, { active: true })
+                  ] }) : resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                     MeasurementOverlay,
                     {
                       lines: poseLines,
@@ -21195,7 +21205,19 @@ function SizeResultView({
             ] });
           }
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "img",
+                {
+                  src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage,
+                  alt: productTitle,
+                  className: "ps-tryon-v2-bg-img",
+                  onLoad: handleImgLoad
+                }
+              ),
+              tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt: tryOnStartedAt ?? null, t: t2 }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(RegenScanOverlay, { active: !!tryOnProcessing })
+            ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-panel", children: [
               mismatchNotice,
               /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -21217,6 +21239,8 @@ function SizeResultView({
                   })(),
                   onBack: () => setActiveSection(null),
                   internationalSizes: entry.secResult?.internationalSizes,
+                  tryOnProcessing,
+                  tryOnStartedAt,
                   t: t2,
                   allSizes: entry.secResult?.allSizes ?? sizingResult?.allSizes
                 }
@@ -26787,7 +26811,7 @@ function CameraUploadIcon() {
 function AccessorySizeView({
   title,
   fields,
-  unitOptions = [{ label: "Centimeters", value: "cm" }, { label: "Inches", value: "in" }],
+  unitOptions,
   photoVariant = "full-body",
   disablePhotoUpload = false,
   productImage,
@@ -26815,6 +26839,10 @@ function AccessorySizeView({
     });
     return init;
   });
+  const resolvedUnitOptions = unitOptions ?? [
+    { label: t2("Centimeters"), value: "cm" },
+    { label: t2("Inches"), value: "in" }
+  ];
   const [error, setError] = reactExports.useState("");
   const fileInputRef = reactExports.useRef(null);
   const [photoPreview, setPhotoPreview] = reactExports.useState(null);
@@ -26901,7 +26929,7 @@ function AccessorySizeView({
       gender: formRef.current.gender || "male"
     });
   };
-  const activeUnitLabel = unitOptions.find((o) => o.value === sizingUnit)?.label || unitOptions[0].label;
+  const activeUnitLabel = resolvedUnitOptions.find((o) => o.value === sizingUnit)?.label || resolvedUnitOptions[0].label;
   if (isMobile && step === "photo") {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       PhotoStepMobile,
@@ -26925,7 +26953,7 @@ function AccessorySizeView({
   if (isMobile) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bpm-root", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-header", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-bpm-title", children: t2(title) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-toggle", style: { padding: "0 4%" }, children: unitOptions.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-toggle", style: { padding: "0 4%" }, children: resolvedUnitOptions.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
         {
           type: "button",
@@ -26997,7 +27025,7 @@ function AccessorySizeView({
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-image", style: { position: "relative" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: productImage, alt: productTitle, className: "ps-bp-image-img" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-root", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-step ps-bp-step-enter", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.6vw", marginBottom: "0.3vw" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-bp-title", style: { margin: 0 }, children: t2(title) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-system-toggle", children: unitOptions.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-system-toggle", children: resolvedUnitOptions.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             type: "button",
@@ -27364,7 +27392,7 @@ function AccessorySizeView({
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { margin: "0.2vw 0 0", fontSize: "0.65vw", color: "var(--ps-text-muted)" }, children: t2("Enter your measurements OR upload a photo — we'll use whichever you provide.") })
           ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.7vw" }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-system-toggle", style: { alignSelf: "center" }, children: unitOptions.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-system-toggle", style: { alignSelf: "center" }, children: resolvedUnitOptions.map((opt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               "button",
               {
                 type: "button",
@@ -27537,130 +27565,141 @@ function AccessorySizeView({
     ] })
   ] }) }) });
 }
-const FALLBACK_FOOT_FIELDS = [
-  {
-    key: "footLengthCm",
-    label: "Foot Length",
-    placeholder: { cm: "e.g. 26.5", in: "e.g. 10.5" },
-    hint: "Measure from heel to longest toe",
-    min: 10,
-    max: 35,
-    step: 0.5
-  }
-];
-function buildFieldsFromSizeGuide$2(sizeGuide) {
+function buildFallbackFootFields(t2) {
+  return [
+    {
+      key: "footLengthCm",
+      label: t2("Foot Length"),
+      placeholder: { cm: "e.g. 26.5", in: "e.g. 10.5" },
+      hint: t2("Measure from heel to longest toe"),
+      min: 10,
+      max: 35,
+      step: 0.5
+    }
+  ];
+}
+function buildFieldsFromSizeGuide$2(sizeGuide, t2) {
+  const fallback = buildFallbackFootFields(t2);
   const req = sizeGuide?.requiredFields;
-  if (!req || req.length === 0) return FALLBACK_FOOT_FIELDS;
+  if (!req || req.length === 0) return fallback;
   const SIZE_CODE_KEYS = /* @__PURE__ */ new Set(["size", "country", "eu", "__skip__", "shoeEU", "shoeUS", "shoeUK", "shoeJP"]);
   const defaultPlaceholderFor = (key, label) => {
-    const exact = FALLBACK_FOOT_FIELDS.find((f2) => f2.key === key);
+    const exact = fallback.find((f2) => f2.key === key);
     if (exact) return exact.placeholder;
     const looksLikeFoot = /foot|length/i.test(key) || /foot|length/i.test(label);
-    if (looksLikeFoot) return FALLBACK_FOOT_FIELDS[0].placeholder;
+    if (looksLikeFoot) return fallback[0].placeholder;
     return { cm: "", in: "" };
   };
   const out = req.filter((f2) => !SIZE_CODE_KEYS.has(f2.key) && f2.unit !== "size").map((f2) => {
-    const fallback = defaultPlaceholderFor(f2.key, f2.label || "");
+    const ph2 = defaultPlaceholderFor(f2.key, f2.label || "");
     return {
       key: f2.key,
-      label: f2.label || f2.key,
+      label: t2(f2.label || f2.key),
       placeholder: {
-        cm: f2.placeholder || fallback.cm,
-        in: f2.placeholder || fallback.in
+        cm: f2.placeholder || ph2.cm,
+        in: f2.placeholder || ph2.in
       },
       min: 0,
       step: 0.5
     };
   });
-  return out.length > 0 ? out : FALLBACK_FOOT_FIELDS;
+  return out.length > 0 ? out : fallback;
 }
 function FootSizeView(props) {
-  const { sizeGuide, ...rest } = props;
-  const fields = buildFieldsFromSizeGuide$2(sizeGuide);
+  const { sizeGuide, t: t2, ...rest } = props;
+  const fields = buildFieldsFromSizeGuide$2(sizeGuide, t2);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     AccessorySizeView,
     {
-      title: "Shoe Size",
+      title: t2("Shoe Size"),
       fields,
       disablePhotoUpload: true,
+      t: t2,
       ...rest
     }
   );
 }
-const FALLBACK_HEAD_FIELDS = [
-  {
-    key: "headCircumference",
-    label: "Head Circumference",
-    placeholder: { cm: "e.g. 57", in: "e.g. 22.5" },
-    hint: "Wrap a tape around the widest part of your head",
-    min: 48,
-    max: 65,
-    step: 0.5
-  }
-];
-function buildFieldsFromSizeGuide$1(sizeGuide) {
+function buildFallbackHeadFields(t2) {
+  return [
+    {
+      key: "headCircumference",
+      label: t2("Head Circumference"),
+      placeholder: { cm: "e.g. 57", in: "e.g. 22.5" },
+      hint: t2("Wrap a tape around the widest part of your head"),
+      min: 48,
+      max: 65,
+      step: 0.5
+    }
+  ];
+}
+function buildFieldsFromSizeGuide$1(sizeGuide, t2) {
   const req = sizeGuide?.requiredFields;
-  if (!req || req.length === 0) return FALLBACK_HEAD_FIELDS;
+  if (!req || req.length === 0) return buildFallbackHeadFields(t2);
   const SIZE_CODE_KEYS = /* @__PURE__ */ new Set(["size", "country", "eu", "__skip__"]);
   return req.filter((f2) => !SIZE_CODE_KEYS.has(f2.key) && f2.unit !== "size").map((f2) => ({
     key: f2.key,
-    label: f2.label || f2.key,
+    label: t2(f2.label || f2.key),
     placeholder: { cm: f2.placeholder || "", in: f2.placeholder || "" },
     min: 0,
     step: 0.5
   }));
 }
 function HeadSizeView(props) {
-  const { sizeGuide, ...rest } = props;
-  const fields = buildFieldsFromSizeGuide$1(sizeGuide);
+  const { sizeGuide, t: t2, ...rest } = props;
+  const fields = buildFieldsFromSizeGuide$1(sizeGuide, t2);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     AccessorySizeView,
     {
-      title: "Headwear Measurements",
+      title: t2("Headwear Measurements"),
       fields,
       photoVariant: "close-up",
+      t: t2,
       ...rest
     }
   );
 }
-const FALLBACK_FACE_FIELDS = [
-  {
-    key: "lensWidth",
-    label: "Lens Width",
-    // `cm` key = mm placeholder (default eyewear unit); `in` key = cm placeholder.
-    placeholder: { mm: "e.g. 52", cm: "e.g. 5.2" },
-    hint: "Width of one lens",
-    min: 0,
-    step: 1
-  },
-  {
-    key: "bridgeWidth",
-    label: "Bridge",
-    placeholder: { mm: "e.g. 18", cm: "e.g. 1.8" },
-    hint: "Distance over the nose between lenses",
-    min: 0,
-    step: 1
-  },
-  {
-    key: "templeLength",
-    label: "Arm Length",
-    placeholder: { mm: "e.g. 140", cm: "e.g. 14" },
-    hint: "Length of the arm from hinge to tip",
-    min: 0,
-    step: 1
-  }
-];
-const EYEWEAR_UNIT_OPTIONS = [
-  { label: "Millimetre", value: "mm" },
-  { label: "Centimetre", value: "cm" }
-];
-function buildFieldsFromSizeGuide(sizeGuide) {
+function buildFallbackFaceFields(t2) {
+  return [
+    {
+      key: "lensWidth",
+      label: t2("Lens Width"),
+      // `cm` key = mm placeholder (default eyewear unit); `in` key = cm placeholder.
+      placeholder: { mm: "e.g. 52", cm: "e.g. 5.2" },
+      hint: t2("Width of one lens"),
+      min: 0,
+      step: 1
+    },
+    {
+      key: "bridgeWidth",
+      label: t2("Bridge"),
+      placeholder: { mm: "e.g. 18", cm: "e.g. 1.8" },
+      hint: t2("Distance over the nose between lenses"),
+      min: 0,
+      step: 1
+    },
+    {
+      key: "templeLength",
+      label: t2("Arm Length"),
+      placeholder: { mm: "e.g. 140", cm: "e.g. 14" },
+      hint: t2("Length of the arm from hinge to tip"),
+      min: 0,
+      step: 1
+    }
+  ];
+}
+function buildEyewearUnitOptions(t2) {
+  return [
+    { label: t2("Millimetre"), value: "mm" },
+    { label: t2("Centimetre"), value: "cm" }
+  ];
+}
+function buildFieldsFromSizeGuide(sizeGuide, t2) {
   const req = sizeGuide?.requiredFields;
-  if (!req || req.length === 0) return FALLBACK_FACE_FIELDS;
+  if (!req || req.length === 0) return buildFallbackFaceFields(t2);
   const SIZE_CODE_KEYS = /* @__PURE__ */ new Set(["size", "country", "eu", "__skip__"]);
   return req.filter((f2) => !SIZE_CODE_KEYS.has(f2.key) && f2.unit !== "size").map((f2) => ({
     key: f2.key,
-    label: f2.label || f2.key,
+    label: t2(f2.label || f2.key),
     placeholder: {
       cm: f2.placeholder || "",
       in: f2.placeholder || ""
@@ -27670,15 +27709,16 @@ function buildFieldsFromSizeGuide(sizeGuide) {
   }));
 }
 function FaceSizeView(props) {
-  const { sizeGuide, ...rest } = props;
-  const fields = buildFieldsFromSizeGuide(sizeGuide);
+  const { sizeGuide, t: t2, ...rest } = props;
+  const fields = buildFieldsFromSizeGuide(sizeGuide, t2);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     AccessorySizeView,
     {
-      title: "Frame Measurements",
+      title: t2("Frame Measurements"),
       fields,
-      unitOptions: EYEWEAR_UNIT_OPTIONS,
+      unitOptions: buildEyewearUnitOptions(t2),
       photoVariant: "close-up",
+      t: t2,
       ...rest
     }
   );

package/package.json

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