@primestyleai/tryon 5.10.171 → 5.10.172

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

@@ -0,0 +1,14 @@
+import type { BodyLandmarks } from "../../pose-detect";
+export interface PoseOverlayProps {
+    landmarks: BodyLandmarks;
+    /** Image width in pixels — used for the SVG viewBox so the overlay
+     *  scales with the underlying photo via `preserveAspectRatio="xMidYMid meet"`. */
+    width: number;
+    height: number;
+    /** Optional `className`/`style` to position the SVG. Defaults to
+     *  absolutely-filling the parent container, which is what both
+     *  consumers want. */
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function PoseOverlay({ landmarks, width, height, className, style }: PoseOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/storefront/primestyle-tryon.js

@@ -10361,20 +10361,28 @@ function getCachedMediaPipe() {
   return cachedMP;
 }
 async function recommendForProduct(input) {
-  const log = (...args) => console.log("[ps-sdk:recommend]", ...args);
+  const callId = (() => {
+    if (typeof window === "undefined") return 0;
+    const w2 = window;
+    w2.__psSdkDiag = w2.__psSdkDiag || {};
+    w2.__psSdkDiag.recommendCalls = (w2.__psSdkDiag.recommendCalls || 0) + 1;
+    return w2.__psSdkDiag.recommendCalls;
+  })();
+  const log = (...args) => console.log(`[ps-sdk:recommend#${callId}]`, ...args);
+  const t0 = Date.now();
+  log("ENTER", { productId: input.productId, apiUrl: input.apiUrl, skipCache: true });
   const profile = input.profile ?? getActiveProfile();
   if (!profile) {
     log("no active profile — returning null");
     return null;
   }
-  log("start", {
-    productId: input.productId,
+  log("profile resolved", {
     profileId: profile.id,
     profileName: profile.name,
     hasMeasurements: !!profile.measurements && Object.keys(profile.measurements || {}).length,
     measurementsCount: Object.keys(profile.measurements || {}).length
   });
-  log("cache MISS — calling backend");
+  log(`cache MISS — calling backend (elapsed in pre-flight: ${Date.now() - t0}ms)`);
   let apiKey;
   try {
     apiKey = input.apiKey ?? getApiKey();
@@ -10389,6 +10397,8 @@ async function recommendForProduct(input) {
   }
   let sizeGuide = null;
   if (input.sizeGuideData != null) {
+    const tSg = Date.now();
+    log("→ POST /api/v1/sizing/sizeguide");
     try {
       const sgRes = await fetch(`${apiUrl}/api/v1/sizing/sizeguide`, {
         method: "POST",
@@ -10400,15 +10410,15 @@ async function recommendForProduct(input) {
       });
       if (sgRes.ok) {
         sizeGuide = await sgRes.json();
-        log("sizeguide OK", { found: sizeGuide?.found, sectionCount: Object.keys(sizeGuide?.sections || {}).length });
+        log(`← sizeguide OK in ${Date.now() - tSg}ms`, { found: sizeGuide?.found, sectionCount: Object.keys(sizeGuide?.sections || {}).length });
       } else {
-        log("sizeguide FAILED", sgRes.status, sgRes.statusText);
+        log(`← sizeguide FAILED in ${Date.now() - tSg}ms`, sgRes.status, sgRes.statusText);
       }
     } catch (e) {
-      log("sizeguide threw", e);
+      log(`← sizeguide threw in ${Date.now() - tSg}ms`, e);
     }
   } else {
-    log("no sizeGuideData provided");
+    log("no sizeGuideData provided — skipping /sizing/sizeguide");
   }
   const measurements = {
     gender: profile.gender,
@@ -10448,7 +10458,8 @@ async function recommendForProduct(input) {
   if (sizeGuide && sizeGuide.found) {
     payload.sizeGuide = sizeGuide;
   }
-  log("calling /sizing/recommend", { measurements: Object.keys(measurements), hasSizeGuide: !!payload.sizeGuide });
+  log("→ POST /api/v1/sizing/recommend", { measurements: Object.keys(measurements), hasSizeGuide: !!payload.sizeGuide });
+  const tRec = Date.now();
   let result = null;
   try {
     const res = await fetch(`${apiUrl}/api/v1/sizing/recommend`, {
@@ -10457,17 +10468,17 @@ async function recommendForProduct(input) {
       body: JSON.stringify(payload)
     });
     if (!res.ok) {
-      log("recommend FAILED", res.status, res.statusText);
+      log(`← recommend FAILED in ${Date.now() - tRec}ms`, res.status, res.statusText);
       return null;
     }
     result = await res.json();
-    log("recommend OK", {
+    log(`← recommend OK in ${Date.now() - tRec}ms (total fn ${Date.now() - t0}ms)`, {
       recommendedSize: result?.recommendedSize,
       sectionKeys: result?.sections ? Object.keys(result.sections) : null,
       sections: result?.sections
     });
   } catch (e) {
-    log("recommend threw", e);
+    log(`← recommend threw in ${Date.now() - tRec}ms`, e);
     return null;
   }
   if (!result || !result.recommendedSize) {
@@ -19314,8 +19325,6 @@ function useIsMobile() {
   return isMobile;
 }
 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"],
@@ -19339,13 +19348,18 @@ function isVisible(p2) {
   if (pt2.x < 1e-3 && pt2.y < 1e-3) return false;
   return true;
 }
-function MobileSkeleton({ landmarks, w: w2, h }) {
+function PoseOverlay({ landmarks, width, height, className, style }) {
+  const longEdge = Math.max(width, height);
+  const stroke = Math.max(2, longEdge / 260);
+  const dotR = Math.max(3, longEdge / 200);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "svg",
     {
-      className: "ps-msc-pose-overlay",
-      viewBox: `0 0 ${w2} ${h}`,
+      className,
+      viewBox: `0 0 ${width} ${height}`,
       preserveAspectRatio: "xMidYMid meet",
+      style: style ?? { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" },
+      "aria-hidden": "true",
       children: [
         SKELETON_CONNECTIONS$1.map(([a, b], i) => {
           const pa2 = landmarks[a];
@@ -19354,12 +19368,12 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
           return /* @__PURE__ */ jsxRuntimeExports.jsx(
             "line",
             {
-              x1: pa2.x * w2,
-              y1: pa2.y * h,
-              x2: pb2.x * w2,
-              y2: pb2.y * h,
+              x1: pa2.x * width,
+              y1: pa2.y * height,
+              x2: pb2.x * width,
+              y2: pb2.y * height,
               stroke: "rgba(100,210,255,0.9)",
-              strokeWidth: "4",
+              strokeWidth: stroke,
               strokeLinecap: "round"
             },
             `l-${i}`
@@ -19367,31 +19381,24 @@ function MobileSkeleton({ landmarks, w: w2, h }) {
         }),
         Object.entries(landmarks).filter(([, v2]) => isVisible(v2)).map(([key, v2]) => {
           const p2 = v2;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "circle",
-              {
-                cx: p2.x * w2,
-                cy: p2.y * h,
-                r: 14,
-                fill: "rgba(100,210,255,0.30)"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "circle",
-              {
-                cx: p2.x * w2,
-                cy: p2.y * h,
-                r: 9,
-                fill: "rgba(100,210,255,0.95)"
-              }
-            )
-          ] }, key);
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "circle",
+            {
+              cx: p2.x * width,
+              cy: p2.y * height,
+              r: dotR,
+              fill: "rgba(100,210,255,0.95)"
+            },
+            key
+          );
         })
       ]
     }
   );
 }
+function MobileSkeleton({ landmarks, w: w2, h }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PoseOverlay, { landmarks, width: w2, height: h, className: "ps-msc-pose-overlay", style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" } });
+}
 function MobileScanningView({
   previewUrl,
   productImage,
@@ -20255,6 +20262,8 @@ function SectionDetailView({
   showLines,
   onToggleLines,
   overlayNode,
+  renderOverlayWithFit,
+  onActiveFitChange,
   onImageLoad,
   onTryOn,
   tryOnProcessing,
@@ -20525,6 +20534,15 @@ function SectionDetailView({
       };
     });
   }, [sectionResult, lengthEntry, userMeasurements, renderRaw, allSizes, displaySize, selectedLength]);
+  reactExports.useEffect(() => {
+    if (!onActiveFitChange) return;
+    onActiveFitChange(fitRows.map((r2) => ({
+      area: r2.area,
+      userNum: r2.userNum ?? 0,
+      chartLabel: r2.chartLabel ?? "",
+      fit: r2.fit ?? "good"
+    })));
+  }, [fitRows, onActiveFitChange]);
   const goodCount = fitRows.filter(
     (r2) => r2.fit === "good" || r2.fit === "a-bit-tight" || r2.fit === "a-bit-loose"
   ).length;
@@ -20669,7 +20687,12 @@ function SectionDetailView({
             onLoad: onImageLoad
           }
         ),
-        showLines && overlayNode,
+        showLines && (renderOverlayWithFit ? renderOverlayWithFit(fitRows.map((r2) => ({
+          area: r2.area,
+          userNum: r2.userNum ?? 0,
+          chartLabel: r2.chartLabel ?? "",
+          fit: r2.fit ?? "good"
+        }))) : overlayNode),
         tryOnProcessing && tryOnStartedAt != null && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt, t: t2 }),
         isTryOnImage && onToggleLines && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
@@ -21314,7 +21337,17 @@ function SizeResultView({
   const [selectedSize, setSelectedSize] = reactExports.useState(null);
   const [showFullChart, setShowFullChart] = reactExports.useState(false);
   const [showLines, setShowLines] = reactExports.useState(false);
+  const [activeFitRows, setActiveFitRows] = reactExports.useState([]);
   const [showVisualFit, setShowVisualFit] = reactExports.useState(false);
+  const [zoomImageUrl, setZoomImageUrl] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    if (!zoomImageUrl) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setZoomImageUrl(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [zoomImageUrl]);
   const [poseLines, setPoseLines] = reactExports.useState(null);
   const [poseReady, setPoseReady] = reactExports.useState(false);
   const [imgDims, setImgDims] = reactExports.useState({ w: 800, h: 1200 });
@@ -21526,6 +21559,69 @@ function SizeResultView({
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: isMobile ? "12px" : "0.62vw", lineHeight: 1.45, color: "var(--ps-text-secondary)" }, children: t2("We noticed your entered details didn't match your photo. To give you accurate sizing, we measured your body directly from the photo.") })
   ] }) : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr", children: [
+    zoomImageUrl && typeof document !== "undefined" && reactDomExports.createPortal(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          onClick: () => setZoomImageUrl(null),
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 2147483647,
+            background: "rgba(0,0,0,0.92)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "zoom-out"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "img",
+              {
+                src: zoomImageUrl,
+                alt: productTitle,
+                style: {
+                  maxWidth: "100vw",
+                  maxHeight: "100vh",
+                  width: "auto",
+                  height: "auto",
+                  objectFit: "contain",
+                  display: "block"
+                },
+                onClick: (e) => e.stopPropagation()
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setZoomImageUrl(null),
+                "aria-label": "Close",
+                style: {
+                  position: "absolute",
+                  top: "1rem",
+                  right: "1rem",
+                  background: "rgba(255,255,255,0.16)",
+                  border: "1px solid rgba(255,255,255,0.32)",
+                  color: "white",
+                  width: "2.4rem",
+                  height: "2.4rem",
+                  borderRadius: "50%",
+                  fontSize: "1.4rem",
+                  lineHeight: 1,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: "×"
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    ),
     isMobile && isSizingOnly && /* @__PURE__ */ jsxRuntimeExports.jsx(
       MobileScanningView,
       {
@@ -21660,7 +21756,9 @@ function SizeResultView({
                   src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage,
                   alt: productTitle,
                   className: "ps-tryon-v2-bg-img",
-                  onLoad: handleImgLoad
+                  onLoad: handleImgLoad,
+                  style: resultImageUrl && !tryOnProcessing ? { cursor: "zoom-in" } : void 0,
+                  onClick: resultImageUrl && !tryOnProcessing ? () => setZoomImageUrl(resultImageUrl) : void 0
                 }
               ),
               tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt: tryOnStartedAt ?? null, t: t2 }),
@@ -21759,7 +21857,17 @@ function SizeResultView({
         /* ── Desktop section picker: split layout — image left, image cards right ── */
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2", children: [
           /* @__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 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "img",
+              {
+                src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage,
+                alt: productTitle,
+                className: "ps-tryon-v2-bg-img",
+                onLoad: handleImgLoad,
+                style: resultImageUrl && !tryOnProcessing ? { cursor: "zoom-in" } : void 0,
+                onClick: resultImageUrl && !tryOnProcessing ? () => setZoomImageUrl(resultImageUrl) : void 0
+              }
+            ),
             tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt: tryOnStartedAt ?? null, t: t2 }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(RegenScanOverlay, { active: !!tryOnProcessing }),
             resultImageUrl && !tryOnProcessing && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (() => {
@@ -21932,6 +22040,7 @@ function SizeResultView({
                   isMobile: true,
                   renderRaw: isAccessory,
                   allSizes: sizingResult?.allSizes,
+                  onActiveFitChange: setActiveFitRows,
                   isTryOnImage: !!resultImageUrl,
                   showLines,
                   onToggleLines: isAccessory ? void 0 : () => setShowLines(!showLines),
@@ -21959,12 +22068,23 @@ function SizeResultView({
                   src: tryOnProcessing && previewUrl ? previewUrl : resultImageUrl || productImage,
                   alt: productTitle,
                   className: "ps-tryon-v2-bg-img",
-                  onLoad: handleImgLoad
+                  onLoad: handleImgLoad,
+                  style: resultImageUrl && !tryOnProcessing ? { cursor: "zoom-in" } : void 0,
+                  onClick: resultImageUrl && !tryOnProcessing ? () => setZoomImageUrl(resultImageUrl) : void 0
                 }
               ),
               tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsx(TryOnGenerationBadge, { tryOnStartedAt: tryOnStartedAt ?? null, t: t2 }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(RegenScanOverlay, { active: !!tryOnProcessing }),
-              resultImageUrl && !tryOnProcessing && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
+              resultImageUrl && !tryOnProcessing && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                MeasurementOverlay,
+                {
+                  lines: poseLines,
+                  fitRows: activeFitRows.length > 0 ? activeFitRows : (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })),
+                  show: showLines,
+                  imgWidth: imgDims.w,
+                  imgHeight: imgDims.h
+                }
+              ),
               resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
                 !isAccessory && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t2("Hide Fit") : t2("Show Fit") }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: handleDownload, children: t2("Download") })
@@ -22001,7 +22121,8 @@ function SizeResultView({
                     tryOnStartedAt,
                     t: t2,
                     renderRaw: isAccessory,
-                    allSizes: sizingResult?.allSizes
+                    allSizes: sizingResult?.allSizes,
+                    onActiveFitChange: setActiveFitRows
                   }
                 )
               ) : sizingResult?.found === false ? (
@@ -23272,7 +23393,7 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
     setPhotoStatus(t2("Analyzing photo…"));
     try {
       const ageCheckPromise = apiUrl && apiKey ? checkAgeBeforeUpload(file, apiUrl, apiKey) : Promise.resolve({ isAdult: true, confidence: "low" });
-      const compressPromise = compressImage(file);
+      const compressPromise = compressImage(file, { maxDimension: 1280, quality: 0.92 });
       const ageResult = await ageCheckPromise;
       if (!ageResult.isAdult) {
         const reason = ageResult.reasoning?.trim() || t2("This photo appears to be of a minor. Please upload a photo of someone 18 or older.");
@@ -23520,6 +23641,7 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
       setEstimating(true);
       const MIN_HOLD_MS = 6e3;
       const minHold = new Promise((r2) => setTimeout(r2, MIN_HOLD_MS));
+      let liveEstimates = null;
       if (onEstimate && photoBase64) {
         const heightRaw = unit === "in" ? (parseInt(heightFt, 10) || 0) * 12 + (parseInt(heightInch, 10) || 0) : parseFloat(heightVal);
         try {
@@ -23533,6 +23655,7 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
             ...a > 0 ? { age: a } : {}
           });
           if (result?.estimates) {
+            liveEstimates = result.estimates;
             setEstimateResults(result.estimates);
           }
         } catch {
@@ -23540,6 +23663,12 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
       }
       await minHold;
       setEstimating(false);
+      const payload2 = buildImagePayload();
+      if (liveEstimates) {
+        payload2.measurements = liveEstimates;
+        payload2.measurementsUnit = "cm";
+      }
+      onSave(payload2);
       return;
     }
     if (imageStep === "details") {
@@ -24530,20 +24659,6 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
           { title: t2("FINALIZING RESULT"), desc: t2("Almost done — preparing your recommendation.") }
         ];
         const stage = stages[Math.min(scanStageIdx, stages.length - 1)] ?? stages[0];
-        const SKELETON_CONNECTIONS2 = [
-          ["leftShoulder", "rightShoulder"],
-          ["leftShoulder", "leftElbow"],
-          ["leftElbow", "leftWrist"],
-          ["rightShoulder", "rightElbow"],
-          ["rightElbow", "rightWrist"],
-          ["leftShoulder", "leftHip"],
-          ["rightShoulder", "rightHip"],
-          ["leftHip", "rightHip"],
-          ["leftHip", "leftKnee"],
-          ["leftKnee", "leftAnkle"],
-          ["rightHip", "rightKnee"],
-          ["rightKnee", "rightAnkle"]
-        ];
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-cpw-fade-in", style: { display: "flex", flexDirection: "column", flex: 1, overflow: "auto" }, children: estimating ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "1.2vw", padding: "1.5vw", flex: 1 }, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: {
             flex: 1,
@@ -24572,40 +24687,12 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
                 }
               }
             ),
-            scanLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "svg",
+            scanLandmarks && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              PoseOverlay,
               {
-                viewBox: `0 0 ${scanImgDims.w} ${scanImgDims.h}`,
-                preserveAspectRatio: "xMidYMid meet",
-                style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" },
-                "aria-hidden": "true",
-                children: [
-                  SKELETON_CONNECTIONS2.map(([a, b], i) => {
-                    const pa2 = scanLandmarks[a];
-                    const pb2 = scanLandmarks[b];
-                    if (!pa2 || !pb2) return null;
-                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "line",
-                      {
-                        x1: pa2.x * scanImgDims.w,
-                        y1: pa2.y * scanImgDims.h,
-                        x2: pb2.x * scanImgDims.w,
-                        y2: pb2.y * scanImgDims.h,
-                        stroke: "rgba(100,210,255,0.95)",
-                        strokeWidth: Math.max(3, scanImgDims.w / 180),
-                        strokeLinecap: "round"
-                      },
-                      `l-${i}`
-                    );
-                  }),
-                  Object.entries(scanLandmarks).map(([key, v2]) => {
-                    const p2 = v2;
-                    return /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: p2.x * scanImgDims.w, cy: p2.y * scanImgDims.h, r: Math.max(7, scanImgDims.w / 75), fill: "rgba(100,210,255,0.25)" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: p2.x * scanImgDims.w, cy: p2.y * scanImgDims.h, r: Math.max(4, scanImgDims.w / 120), fill: "rgba(100,210,255,0.95)" })
-                    ] }, key);
-                  })
-                ]
+                landmarks: scanLandmarks,
+                width: scanImgDims.w,
+                height: scanImgDims.h
               }
             )
           ] }),
@@ -28434,6 +28521,30 @@ function PrimeStyleTryonInner({
   sizeGuideData
 }) {
   const effectiveProductId = productId || productImage;
+  const renderCountRef = reactExports.useRef(0);
+  const mountIdRef = reactExports.useRef(null);
+  if (mountIdRef.current === null && typeof window !== "undefined") {
+    const w2 = window;
+    w2.__psSdkDiag = w2.__psSdkDiag || { mounts: 0, effectFires: 0, tryonMounts: 0, tryonRenders: 0 };
+    w2.__psSdkDiag.tryonMounts += 1;
+    mountIdRef.current = w2.__psSdkDiag.tryonMounts;
+  }
+  renderCountRef.current += 1;
+  if (typeof window !== "undefined") {
+    window.__psSdkDiag.tryonRenders = (window.__psSdkDiag.tryonRenders || 0) + 1;
+  }
+  console.log(
+    `[ps-sdk:tryon#${mountIdRef.current}] render #${renderCountRef.current}`,
+    {
+      productId: effectiveProductId,
+      productImagesLen: productImages?.length ?? 0,
+      productImagesRef: productImages
+    }
+  );
+  reactExports.useEffect(() => {
+    console.log(`[ps-sdk:tryon#${mountIdRef.current}] MOUNT`);
+    return () => console.log(`[ps-sdk:tryon#${mountIdRef.current}] UNMOUNT`);
+  }, []);
   const [activeLocale, setActiveLocale] = reactExports.useState(() => locale || "");
   reactExports.useEffect(() => {
     if (locale !== void 0) setActiveLocale(locale);
@@ -28562,15 +28673,31 @@ function PrimeStyleTryonInner({
       if (pollingRef.current) clearInterval(pollingRef.current);
     };
   }, [apiUrl]);
+  const pickFireCountRef = reactExports.useRef(0);
   reactExports.useEffect(() => {
+    pickFireCountRef.current += 1;
+    const fireN = pickFireCountRef.current;
+    const reason = !productImages ? "no productImages" : productImages.length < 2 ? `productImages.length=${productImages.length}` : `len=${productImages.length} firstUrl=${productImages[0]?.slice(0, 40)}`;
+    console.log(`[ps-sdk:pick] effect FIRE #${fireN} — ${reason}`, {
+      productImagesRef: productImages,
+      garmentReferenceImageSet: !!garmentReferenceImage,
+      apiUrl,
+      productTitle
+    });
     bestGarmentImageRef.current = null;
     if (garmentReferenceImage) {
       bestGarmentImageRef.current = garmentReferenceImage;
+      console.log(`[ps-sdk:pick] #${fireN} early-return — using prop override`);
+      return;
+    }
+    if (!productImages || productImages.length < 2) {
+      console.log(`[ps-sdk:pick] #${fireN} early-return — too few images, no /pick-best call`);
       return;
     }
-    if (!productImages || productImages.length < 2) return;
     const baseUrl = getApiUrl(apiUrl);
     const ctrl = new AbortController();
+    const t0 = Date.now();
+    console.log(`[ps-sdk:pick] #${fireN} → POST /api/catalog/pick-best-garment-image`);
     fetch(`${baseUrl}/api/catalog/pick-best-garment-image`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -28579,11 +28706,17 @@ function PrimeStyleTryonInner({
     }).then((r2) => r2.ok ? r2.json() : null).then((j) => {
       if (j?.bestUrl) {
         bestGarmentImageRef.current = j.bestUrl;
-        console.log(`[ps-sdk] pre-picked garment reference: ${j.bestUrl}`);
+        console.log(`[ps-sdk:pick] #${fireN} ← OK in ${Date.now() - t0}ms → ${j.bestUrl}`);
+      } else {
+        console.log(`[ps-sdk:pick] #${fireN} ← no bestUrl in response (${Date.now() - t0}ms)`);
       }
-    }).catch(() => {
+    }).catch((e) => {
+      console.log(`[ps-sdk:pick] #${fireN} ← aborted/network error in ${Date.now() - t0}ms`, e?.name || e);
     });
-    return () => ctrl.abort();
+    return () => {
+      ctrl.abort();
+      console.log(`[ps-sdk:pick] #${fireN} cleanup — aborted in-flight fetch`);
+    };
   }, [productImages, garmentReferenceImage, apiUrl, productTitle]);
   const TARGET_SECONDS2 = 22;
   const progressRef = reactExports.useRef(0);
@@ -29713,12 +29846,12 @@ function PrimeStyleTryonInner({
     if (noFitFoundRef.current) return;
     if (autoTryOnFiredRef.current) return;
     if (tryOnProcessing || resultImageUrl) return;
-    if (!sizingResult) return;
+    if (!sizingLoading && !sizingResult) return;
     const file = selectedFile || selectedFileRef.current;
     if (!file) return;
     autoTryOnFiredRef.current = true;
     handleTryOnSubmit();
-  }, [view, selectedFile, sizingResult, tryOnProcessing, resultImageUrl, handleTryOnSubmit]);
+  }, [view, selectedFile, sizingLoading, sizingResult, tryOnProcessing, resultImageUrl, handleTryOnSubmit]);
   const handleDownload = reactExports.useCallback(() => {
     if (!resultImageUrl) return;
     if (resultImageUrl.startsWith("data:")) {
@@ -30353,7 +30486,12 @@ function PrimeStyleTryonInner({
               const heightUnitVal = newProfile.sizingUnit === "in" ? "in" : "cm";
               const weightUnitVal = newProfile.sizingUnit === "in" ? "lbs" : "kg";
               const photoBase64 = newProfile.photoBase64;
-              const hasMeasurements = !!newProfile.measurements && Object.keys(newProfile.measurements).length > 0;
+              const measurementsObj = newProfile.measurements;
+              const hasMeasurements = !!measurementsObj && Object.keys(measurementsObj).length > 0 && typeof measurementsObj.neckCircumference === "number" && measurementsObj.neckCircumference > 0;
+              console.log(
+                "[ps-sdk:saveProfile] hasMeasurements=" + hasMeasurements,
+                measurementsObj ? { neck: measurementsObj.neckCircumference, chest: measurementsObj.chest, photoBase64Set: !!photoBase64 } : null
+              );
               if (!hasMeasurements && (photoBase64 || heightVal > 0 && weightVal > 0)) {
                 setEstimatingProfileIds((prev) => new Set(prev).add(newProfile.id));
                 const landmarksPromise = photoBase64 ? detectBodyLandmarks(photoBase64).catch(() => null) : Promise.resolve(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.10.171",
+  "version": "5.10.172",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",
@@ -64,5 +64,8 @@
     "terser": "^5.31.0",
     "typescript": "^5.5.0",
     "vite": "^5.4.0"
+  },
+  "dependencies": {
+    "@primestyleai/tryon": "file:primestyleai-tryon-5.10.171.tgz"
   }
 }