@primestyleai/tryon 5.8.54 → 5.8.56

package/dist/pose-detect.d.ts

@@ -67,7 +67,15 @@ export interface BodyLandmarks {
         y: number;
     };
 }
+/** Pixel dimensions of the image the landmarks were detected on. Sent to
+ *  the backend alongside the landmarks so it can convert normalized x/y
+ *  into pixels — without this, horizontal and vertical distances on a
+ *  non-square image are skewed by the aspect ratio. */
+export interface BodyLandmarksWithDims extends BodyLandmarks {
+    imageWidth: number;
+    imageHeight: number;
+}
 export declare function detectMeasurementLines(imageSrc: string): Promise<MeasurementLines | null>;
 /** Detect full body landmarks for per-field measurement guides.
  *  Accepts a URL string OR an already-loaded HTMLImageElement to avoid CORS issues. */
-export declare function detectBodyLandmarks(imageSrc: string | HTMLImageElement): Promise<BodyLandmarks | null>;
+export declare function detectBodyLandmarks(imageSrc: string | HTMLImageElement): Promise<BodyLandmarksWithDims | null>;

package/dist/react/index.js

@@ -121,7 +121,9 @@ async function detectBodyLandmarks(imageSrc) {
       rightKnee: { x: lm[RIGHT_KNEE].x, y: lm[RIGHT_KNEE].y },
       leftAnkle: { x: lm[LEFT_ANKLE].x, y: lm[LEFT_ANKLE].y },
       rightAnkle: { x: lm[RIGHT_ANKLE].x, y: lm[RIGHT_ANKLE].y },
-      nose: { x: lm[NOSE].x, y: lm[NOSE].y }
+      nose: { x: lm[NOSE].x, y: lm[NOSE].y },
+      imageWidth: img.naturalWidth || img.width,
+      imageHeight: img.naturalHeight || img.height
     };
   } catch (err) {
     console.error("[PS-SDK] Body landmark detection failed:", err);
@@ -7819,6 +7821,7 @@ function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
     SKELETON_CONNECTIONS.map(([a, b], i) => {
       const pa = landmarks[a];
       const pb = landmarks[b];
+      if (!pa || !pb || typeof pa !== "object" || typeof pb !== "object" || typeof pa.x !== "number" || typeof pa.y !== "number" || typeof pb.x !== "number" || typeof pb.y !== "number") return null;
       return /* @__PURE__ */ jsx(
         "line",
         {
@@ -7835,7 +7838,7 @@ function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
         `l-${i}`
       );
     }),
-    Object.entries(landmarks).map(([key, v], i) => /* @__PURE__ */ jsxs("g", { children: [
+    Object.entries(landmarks).filter(([, v]) => v && typeof v === "object" && typeof v.x === "number" && typeof v.y === "number").map(([key, v], i) => /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "circle",
         {
@@ -7879,6 +7882,7 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
   const strokeW = Math.max(5, 3 * scale);
   const dotR = Math.max(7, 5 * scale);
   return /* @__PURE__ */ jsx("svg", { className: "ps-tryon-pose-overlay", viewBox: `0 0 ${W} ${H}`, preserveAspectRatio: "xMidYMid meet", children: areas.map(({ key, line, label }, i) => {
+    if (!line || typeof line.x1 !== "number" || typeof line.x2 !== "number" || typeof line.y !== "number") return null;
     const x1 = line.x1 * W;
     const x2 = line.x2 * W;
     const cy = line.y * H;
@@ -8046,7 +8050,8 @@ function SectionDetailView({
   tryOnProcessing,
   backLabel,
   internationalSizes,
-  continueLabel
+  continueLabel,
+  renderRaw = false
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = useState(null);
@@ -8164,6 +8169,18 @@ function SectionDetailView({
     return { range: val, ...parsed };
   }, [section, sizeColIdx, sizeHeader, unitLbl, columnUnits]);
   const fitRows = useMemo(() => {
+    if (renderRaw) {
+      const raw = sectionResult?.matchDetails || [];
+      return raw.map((m) => ({
+        area: m.measurement.replace(/\s*\(.*?\)\s*$/, "").trim() || m.measurement,
+        rawUserValue: m.userValue,
+        rawChartRange: m.chartRange,
+        fit: m.fit,
+        userNum: 0,
+        chartLabel: "",
+        isLength: false
+      }));
+    }
     const mainDetails = sectionResult?.matchDetails || [];
     const lengthDetails = lengthEntry?.secResult?.matchDetails || [];
     const details = [...mainDetails, ...lengthDetails];
@@ -8233,11 +8250,12 @@ function SectionDetailView({
       }
       return { area: m.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: false };
     });
-  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength]);
+  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength, renderRaw]);
   const goodCount = fitRows.filter(
     (r) => r.fit === "good" || r.fit === "a-bit-tight" || r.fit === "a-bit-loose"
   ).length;
   const matchPercent = fitRows.length > 0 ? Math.round(goodCount / fitRows.length * 100) : 0;
+  const showMatchPercent = !renderRaw;
   const secAny = sectionResult;
   const backendSize = secAny?.size || recSize;
   const backendLength = secAny?.length || recLength;
@@ -8404,7 +8422,7 @@ function SectionDetailView({
             /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cells", children: [
               /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell", children: [
                 /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-label", children: t("USER") }),
-                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "ps-msd-row-cell ps-right", children: [
                 /* @__PURE__ */ jsxs("span", { className: "ps-msd-cell-label", children: [
@@ -8412,7 +8430,7 @@ function SectionDetailView({
                   " ",
                   displaySize
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: dLabel(row.chartLabel) })
+                /* @__PURE__ */ jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) })
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: `ps-msd-row-badge ${fitClass}`, children: [
@@ -8511,7 +8529,7 @@ function SectionDetailView({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
+      showMatchPercent && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
         /* @__PURE__ */ jsxs("svg", { width: "1vw", height: "1vw", viewBox: "0 0 16 16", fill: "none", children: [
           /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "var(--ps-accent)" }),
           /* @__PURE__ */ jsx("path", { d: "M4.5 8L7 10.5L11.5 5.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -8534,8 +8552,8 @@ function SectionDetailView({
           const fitBg = row.fit === "good" ? "rgba(33,84,239,0.08)" : row.fit.includes("tight") ? "rgba(220,38,38,0.08)" : "rgba(217,119,6,0.08)";
           return /* @__PURE__ */ jsxs("tr", { style: { borderBottom: i < fitRows.length - 1 ? "1px solid rgba(0,0,0,0.04)" : "none" }, children: [
             /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", fontWeight: 500, color: "var(--ps-text-primary)" }, children: row.area }),
-            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
-            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: dLabel(row.chartLabel) }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
+            /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) }),
             /* @__PURE__ */ jsx("td", { style: { padding: "0.55vw 0.6vw", textAlign: "right" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", fontWeight: 600, color: fitColor, background: fitBg, borderRadius: "1vw", padding: "0.15vw 0.5vw", whiteSpace: "nowrap" }, children: row.isLength ? lengthFitLabelFn(row.fit, t) : fitLabelFn(row.fit, t) }) })
           ] }, i);
         }) })
@@ -9264,6 +9282,7 @@ function SizeResultView({
                 productImage: resultImageUrl || productImage,
                 productTitle,
                 isMobile: true,
+                renderRaw: isAccessory,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
                 onToggleLines: () => setShowLines(!showLines),
@@ -9307,7 +9326,8 @@ function SizeResultView({
                 onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
-                t
+                t,
+                renderRaw: isAccessory
               }
             ) }, "panel-single")
           ] });
@@ -13039,6 +13059,7 @@ function FootSizeView(props) {
     {
       title: "Shoe Size",
       fields,
+      disablePhotoUpload: true,
       ...rest
     }
   );

package/dist/storefront/primestyle-tryon.js

@@ -9583,7 +9583,9 @@ async function detectBodyLandmarks(imageSrc) {
       rightKnee: { x: lm[RIGHT_KNEE].x, y: lm[RIGHT_KNEE].y },
       leftAnkle: { x: lm[LEFT_ANKLE].x, y: lm[LEFT_ANKLE].y },
       rightAnkle: { x: lm[RIGHT_ANKLE].x, y: lm[RIGHT_ANKLE].y },
-      nose: { x: lm[NOSE].x, y: lm[NOSE].y }
+      nose: { x: lm[NOSE].x, y: lm[NOSE].y },
+      imageWidth: img.naturalWidth || img.width,
+      imageHeight: img.naturalHeight || img.height
     };
   } catch (err) {
     console.error("[PS-SDK] Body landmark detection failed:", err);
@@ -17243,6 +17245,7 @@ function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
     SKELETON_CONNECTIONS.map(([a, b], i) => {
       const pa2 = landmarks[a];
       const pb2 = landmarks[b];
+      if (!pa2 || !pb2 || typeof pa2 !== "object" || typeof pb2 !== "object" || typeof pa2.x !== "number" || typeof pa2.y !== "number" || typeof pb2.x !== "number" || typeof pb2.y !== "number") return null;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         "line",
         {
@@ -17259,7 +17262,7 @@ function SkeletonOverlay({ landmarks, imgWidth, imgHeight }) {
         `l-${i}`
       );
     }),
-    Object.entries(landmarks).map(([key, v2], i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
+    Object.entries(landmarks).filter(([, v2]) => v2 && typeof v2 === "object" && typeof v2.x === "number" && typeof v2.y === "number").map(([key, v2], i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "circle",
         {
@@ -17303,6 +17306,7 @@ function MeasurementOverlay({ lines, fitRows, show, imgWidth, imgHeight }) {
   const strokeW = Math.max(5, 3 * scale);
   const dotR = Math.max(7, 5 * scale);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { className: "ps-tryon-pose-overlay", viewBox: `0 0 ${W2} ${H2}`, preserveAspectRatio: "xMidYMid meet", children: areas.map(({ key, line, label }, i) => {
+    if (!line || typeof line.x1 !== "number" || typeof line.x2 !== "number" || typeof line.y !== "number") return null;
     const x1 = line.x1 * W2;
     const x2 = line.x2 * W2;
     const cy = line.y * H2;
@@ -17470,7 +17474,8 @@ function SectionDetailView({
   tryOnProcessing,
   backLabel,
   internationalSizes,
-  continueLabel
+  continueLabel,
+  renderRaw = false
 }) {
   const recSize = sectionResult?.recommendedSize || "";
   const [selectedSize, setSelectedSize] = reactExports.useState(null);
@@ -17588,6 +17593,18 @@ function SectionDetailView({
     return { range: val, ...parsed };
   }, [section, sizeColIdx, sizeHeader, unitLbl, columnUnits]);
   const fitRows = reactExports.useMemo(() => {
+    if (renderRaw) {
+      const raw = sectionResult?.matchDetails || [];
+      return raw.map((m2) => ({
+        area: m2.measurement.replace(/\s*\(.*?\)\s*$/, "").trim() || m2.measurement,
+        rawUserValue: m2.userValue,
+        rawChartRange: m2.chartRange,
+        fit: m2.fit,
+        userNum: 0,
+        chartLabel: "",
+        isLength: false
+      }));
+    }
     const mainDetails = sectionResult?.matchDetails || [];
     const lengthDetails = lengthEntry?.secResult?.matchDetails || [];
     const details = [...mainDetails, ...lengthDetails];
@@ -17657,11 +17674,12 @@ function SectionDetailView({
       }
       return { area: m2.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: false };
     });
-  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength]);
+  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength, renderRaw]);
   const goodCount = fitRows.filter(
     (r2) => r2.fit === "good" || r2.fit === "a-bit-tight" || r2.fit === "a-bit-loose"
   ).length;
   const matchPercent = fitRows.length > 0 ? Math.round(goodCount / fitRows.length * 100) : 0;
+  const showMatchPercent = !renderRaw;
   const secAny = sectionResult;
   const backendSize = secAny?.size || recSize;
   const backendLength = secAny?.length || recLength;
@@ -17828,7 +17846,7 @@ function SectionDetailView({
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msd-row-cells", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msd-row-cell", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-label", children: t2("USER") }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msd-row-cell ps-right", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-msd-cell-label", children: [
@@ -17836,7 +17854,7 @@ function SectionDetailView({
                   " ",
                   displaySize
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: dLabel(row.chartLabel) })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msd-cell-value", children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) })
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `ps-msd-row-badge ${fitClass}`, children: [
@@ -17935,7 +17953,7 @@ function SectionDetailView({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
+      showMatchPercent && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.4vw", marginBottom: "1.2vw" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "1vw", height: "1vw", viewBox: "0 0 16 16", fill: "none", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "var(--ps-accent)" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4.5 8L7 10.5L11.5 5.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -17958,8 +17976,8 @@ function SectionDetailView({
           const fitBg = row.fit === "good" ? "rgba(33,84,239,0.08)" : row.fit.includes("tight") ? "rgba(220,38,38,0.08)" : "rgba(217,119,6,0.08)";
           return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { style: { borderBottom: i < fitRows.length - 1 ? "1px solid rgba(0,0,0,0.04)" : "none" }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", fontWeight: 500, color: "var(--ps-text-primary)" }, children: row.area }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: dLabel(row.chartLabel) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawUserValue || "—" : isNaN(row.userNum) || row.userNum === 0 ? "—" : `${dNum(row.userNum)} ${unitLbl}` }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", fontSize: "0.75vw", color: "var(--ps-text-secondary)" }, children: renderRaw ? row.rawChartRange || "—" : dLabel(row.chartLabel) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("td", { style: { padding: "0.55vw 0.6vw", textAlign: "right" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", fontWeight: 600, color: fitColor, background: fitBg, borderRadius: "1vw", padding: "0.15vw 0.5vw", whiteSpace: "nowrap" }, children: row.isLength ? lengthFitLabelFn(row.fit, t2) : fitLabelFn(row.fit, t2) }) })
           ] }, i);
         }) })
@@ -18688,6 +18706,7 @@ function SizeResultView({
                 productImage: resultImageUrl || productImage,
                 productTitle,
                 isMobile: true,
+                renderRaw: isAccessory,
                 isTryOnImage: !!resultImageUrl,
                 showLines,
                 onToggleLines: () => setShowLines(!showLines),
@@ -18731,7 +18750,8 @@ function SizeResultView({
                 onTryOn: resultImageUrl || isAccessory ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t2("Continue Shopping") : void 0,
                 tryOnProcessing,
-                t: t2
+                t: t2,
+                renderRaw: isAccessory
               }
             ) }, "panel-single")
           ] });
@@ -22463,6 +22483,7 @@ function FootSizeView(props) {
     {
       title: "Shoe Size",
       fields,
+      disablePhotoUpload: true,
       ...rest
     }
   );

package/package.json

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