@primestyleai/tryon 5.10.122 → 5.10.124

package/dist/react/types.d.ts

@@ -116,6 +116,11 @@ export interface HistoryEntry {
      *  IndexedDB rather than in this localStorage object to avoid the ~5–10 MB
      *  quota. Old entries without a photo set this false/undefined. */
     hasPhoto?: boolean;
+    /** True when the try-on RESULT image is stored as a Blob in IndexedDB
+     *  (key = `result-<entry.id>`). Restored as an object URL on history
+     *  click so the result survives even if the original URL (Cloudinary
+     *  / data:) expired or was lost. */
+    hasResult?: boolean;
     /** What the user actually selected when they ran the try-on (per section). */
     selectedSizes?: Array<{
         sectionName: string;

package/dist/react/utils/photo-store.d.ts

@@ -15,5 +15,11 @@ export declare function savePhoto(id: string, blob: Blob): Promise<boolean>;
 export declare function getPhoto(id: string): Promise<Blob | null>;
 /** Delete a photo by historyEntryId. */
 export declare function deletePhoto(id: string): Promise<boolean>;
-/** Garbage-collect: keep only photos whose id is in `keepIds`. */
+/** Save a try-on result Blob keyed by historyEntryId. Replaces if exists. */
+export declare function saveResult(id: string, blob: Blob): Promise<boolean>;
+/** Load a try-on result Blob by historyEntryId, or null if not stored. */
+export declare function getResult(id: string): Promise<Blob | null>;
+/** Garbage-collect: keep only photos (and results) whose id is in `keepIds`.
+ *  Uses a value cursor (openCursor) so records can be deleted during
+ *  iteration — openKeyCursor's cursor.delete() throws InvalidStateError. */
 export declare function pruneToIds(keepIds: Set<string>): Promise<void>;

package/dist/storefront/primestyle-tryon.js

@@ -9624,6 +9624,7 @@ function openDb() {
   });
   return _dbPromise;
 }
+const RESULT_PREFIX = "result-";
 async function savePhoto(id2, blob) {
   const db2 = await openDb();
   if (!db2) return false;
@@ -9653,19 +9654,30 @@ async function getPhoto(id2) {
     }
   });
 }
+async function saveResult(id2, blob) {
+  return savePhoto(RESULT_PREFIX + id2, blob);
+}
+async function getResult(id2) {
+  return getPhoto(RESULT_PREFIX + id2);
+}
 async function pruneToIds(keepIds) {
   const db2 = await openDb();
   if (!db2) return;
+  const expected = /* @__PURE__ */ new Set();
+  for (const id2 of keepIds) {
+    expected.add(id2);
+    expected.add(RESULT_PREFIX + id2);
+  }
   return new Promise((resolve) => {
     try {
       const tx = db2.transaction(STORE, "readwrite");
       const store = tx.objectStore(STORE);
-      const cursorReq = store.openKeyCursor();
+      const cursorReq = store.openCursor();
       cursorReq.onsuccess = () => {
         const cursor = cursorReq.result;
         if (!cursor) return;
         const key = String(cursor.key);
-        if (!keepIds.has(key)) cursor.delete();
+        if (!expected.has(key)) cursor.delete();
         cursor.continue();
       };
       tx.oncomplete = () => resolve();
@@ -20101,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 {
@@ -20129,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;
@@ -21145,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,
@@ -21183,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(
@@ -21205,6 +21239,8 @@ function SizeResultView({
                   })(),
                   onBack: () => setActiveSection(null),
                   internationalSizes: entry.secResult?.internationalSizes,
+                  tryOnProcessing,
+                  tryOnStartedAt,
                   t: t2,
                   allSizes: entry.secResult?.allSizes ?? sizingResult?.allSizes
                 }
@@ -26775,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,
@@ -26803,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);
@@ -26889,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,
@@ -26913,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",
@@ -26985,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",
@@ -27352,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",
@@ -27525,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 || ""
@@ -27658,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
     }
   );
@@ -29201,15 +29253,30 @@ function PrimeStyleTryonInner({
         displayLabel: o.displayLabel,
         isOverride: !!recommended && o.selectedSize !== recommended
       }));
+      let entryId = null;
       setHistory((prev) => {
         if (prev.length === 0) return prev;
+        entryId = prev[0].id;
         const updated = {
           ...prev[0],
           resultImageUrl,
+          hasResult: true,
           ...selectedSizes.length ? { selectedSizes } : {}
         };
         return [updated, ...prev.slice(1)];
       });
+      if (entryId) {
+        const id2 = entryId;
+        void (async () => {
+          try {
+            const res = await fetch(resultImageUrl);
+            if (!res.ok) return;
+            const blob = await res.blob();
+            await saveResult(id2, blob);
+          } catch {
+          }
+        })();
+      }
     } else if (view === "result" && resultImageUrl && !historySavedRef.current) {
       historySavedRef.current = true;
       saveHistoryEntry().catch(() => {
@@ -29239,6 +29306,13 @@ function PrimeStyleTryonInner({
       setSizeGuideFetching(false);
     }
     setResultImageUrl(entry.resultImageUrl || null);
+    if (entry.hasResult || entry.resultImageUrl) {
+      void getResult(entry.id).then((blob) => {
+        if (!blob) return;
+        const url = URL.createObjectURL(blob);
+        setResultImageUrl(url);
+      });
+    }
     if (entry.hasPhoto) {
       void getPhoto(entry.id).then((blob) => {
         if (!blob) return;

package/package.json

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