@primestyleai/tryon 5.10.103 → 5.10.105

package/dist/react/types.d.ts

@@ -139,10 +139,21 @@ export type ViewState = "idle" | "welcome" | "body-profile" | "estimation-review
 export type DrawerType = "profiles" | "history" | null;
 export interface PrimeStyleTryonProps {
     productImage: string;
-    /** Optional gallery of product photos for the active color/variant. Shown
-     *  as an auto-cycling carousel on the single-garment SizeResultView while
-     *  the try-on image is being generated, to keep the user entertained. */
+    /** Optional gallery of product photos for the active color/variant.
+     *
+     *  - Shown as an auto-cycling carousel on the single-garment
+     *    SizeResultView while the try-on image is being generated.
+     *  - At try-on time the SDK runs MediaPipe BlazePose on every entry in
+     *    parallel and forwards the highest-scoring "model wearing the
+     *    garment" shot to Gemini as image 2. Flat-lays / close-up details
+     *    score ~0 and are skipped. The first image still shows in the UI
+     *    unchanged. */
     productImages?: string[];
+    /** Optional explicit override — if you already know which image in the
+     *  gallery is the model-wearing-the-garment shot, pass it here and the
+     *  SDK skips the MediaPipe-based auto-pick. Falls through to auto-pick
+     *  (or to `productImage`) when omitted. */
+    garmentReferenceImage?: string;
     productTitle?: string;
     /** Stable product identifier — used to cache size recommendations per (profile, product) */
     productId?: string;

package/dist/react/utils/pickBestGarmentImage.d.ts

@@ -0,0 +1 @@
+export declare function pickBestGarmentImage(images: string[] | null | undefined): Promise<string | null>;

package/dist/storefront/cart-hook.d.ts

@@ -21,6 +21,13 @@ export declare function setLastCompletedProduct(productId: string | null, produc
  * the size-result view. The cart-hook then fires a SIZE_RECOMMENDATION_ACCEPTED
  * event when this product gets added to cart — a clearer "user committed"
  * signal than "user clicked a pill once".
+ *
+ * Side-effect: proactively stamp the current cart with `attributes[ps_session]`
+ * via `/cart/update.js`. This is the primary attribution path now — works
+ * regardless of how the buyer eventually checks out (Ajax cart, Buy It Now,
+ * Shop Pay), because the attribute is already on the cart object before
+ * the buyer adds anything. The legacy fetch/form-submit interception below
+ * stays as a defense-in-depth fallback for older themes.
  */
 export declare function setLastSizeSelection(input: {
     productId: string | null;

package/dist/storefront/primestyle-tryon.js

@@ -1,4 +1,46 @@
 "use client";
+const TAG$3 = "[primestyle-shadow]";
+const collected = [];
+if (typeof document !== "undefined" && document.head) {
+  let shouldCapture = function(node) {
+    return node instanceof HTMLStyleElement;
+  };
+  const origAppend = document.head.appendChild.bind(document.head);
+  const origInsertBefore = document.head.insertBefore.bind(document.head);
+  document.head.appendChild = function(node) {
+    if (shouldCapture(node)) {
+      collected.push(node);
+      console.log(`${TAG$3} captured style tag (${node.textContent?.length ?? 0} chars)`);
+    }
+    return origAppend(node);
+  };
+  document.head.insertBefore = function(node, ref) {
+    if (shouldCapture(node)) {
+      collected.push(node);
+      console.log(`${TAG$3} captured style tag via insertBefore (${node.textContent?.length ?? 0} chars)`);
+    }
+    return origInsertBefore(node, ref);
+  };
+}
+function getCollectedCss() {
+  const parts = [];
+  for (const el2 of collected) {
+    const text = el2.textContent;
+    if (text) parts.push(text);
+  }
+  return parts.join("\n\n");
+}
+function injectStylesIntoShadow(shadow) {
+  const css = getCollectedCss();
+  if (!css) {
+    console.warn(`${TAG$3} no SDK styles collected — widget may render unstyled`);
+    return;
+  }
+  const style = document.createElement("style");
+  style.setAttribute("data-primestyle", "sdk-styles");
+  style.textContent = css;
+  shadow.appendChild(style);
+}
 var react = { exports: {} };
 var react_production_min = {};
 /**
@@ -10588,6 +10630,45 @@ function getUnitLabel(unit) {
   if (unit === "mm") return "mm";
   return "";
 }
+const cache = /* @__PURE__ */ new Map();
+function scoreLandmarks(lm) {
+  if (!lm) return 0;
+  let joints = 0;
+  for (const [k2, v2] of Object.entries(lm)) {
+    if (k2 === "imageWidth" || k2 === "imageHeight") continue;
+    if (v2 && typeof v2 === "object" && typeof v2.x === "number") joints++;
+  }
+  let score = joints * 10;
+  if (lm.nose) score += 50;
+  if (lm.leftAnkle && lm.rightAnkle) score += 5;
+  return score;
+}
+async function scoreImage(url) {
+  try {
+    const lm = await detectBodyLandmarks(url);
+    return scoreLandmarks(lm);
+  } catch {
+    return 0;
+  }
+}
+async function pickBestGarmentImage(images) {
+  if (!images || !images.length) return null;
+  if (images.length === 1) return images[0];
+  const cacheKey = images.join("|");
+  const cached = cache.get(cacheKey);
+  if (cached) return cached;
+  const t0 = Date.now();
+  const scored = await Promise.all(images.map(async (url) => ({
+    url,
+    score: await scoreImage(url)
+  })));
+  scored.sort((a, b) => b.score - a.score);
+  const best = (scored[0]?.score ?? 0) > 0 ? scored[0].url : images[0];
+  cache.set(cacheKey, best);
+  console.log(`[ps-sdk:garment-pick] ${Date.now() - t0}ms — chose ${images.indexOf(best)}/${images.length}`);
+  for (const s of scored) console.log(`[ps-sdk:garment-pick]   ${s.score.toString().padStart(4, " ")}  ${s.url}`);
+  return best;
+}
 function cx(base, override) {
   return override ? `${base} ${override}` : base;
 }
@@ -19379,14 +19460,6 @@ function ProductPhotoCarouselCard({
     slide.push(photos[(start + slide.length) % photos.length]);
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-photo-strip", role: "group", "aria-label": t2("Product photos"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-photo-strip-head", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-photo-strip-badge", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9", cy: "9", r: "2" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
-      ] }),
-      t2("Gallery")
-    ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-photo-strip-row", children: slide.map((src, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-photo-strip-cell", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src, alt: productTitle || "", draggable: false }) }, `${groupIdx}-${i}`)) }, groupIdx),
     totalGroups > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-photo-strip-dots", "aria-hidden": "true", children: Array.from({ length: totalGroups }).map((_, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `ps-tryon-photo-strip-dot${i === groupIdx ? " is-active" : ""}` }, i)) })
   ] });
@@ -20027,103 +20100,26 @@ function SectionDetailView({
     return details.map((m2) => {
       if (isFromLength.has(m2.measurement)) {
         const userNum2 = userMeasurements[m2.measurement.toLowerCase()] || pNumFn(m2.userValue);
-        const activeLength = selectedLength || effectiveRecLength || m2.chartRange;
-        if (!lengthEntry) {
-          return { area: m2.measurement + " (" + activeLength + ")", userNum: userNum2, chartLabel: activeLength, fit: "good", isLength: true };
-        }
-        const sec = lengthEntry.section;
-        const measLc = m2.measurement.toLowerCase();
-        const isHeight = measLc === "height";
-        const sizeCol = sec.headers.findIndex((h) => /size|length/i.test(h.trim()));
-        const userIsInches = unitLbl === "in";
-        let targetColIdx = -1;
-        let colIsCm = false;
-        if (isHeight) {
-          const cmColIdx = sec.headers.findIndex((h) => /cm|\(cm\)|height.*cm/i.test(h.toLowerCase()));
-          const genericColIdx = sec.headers.findIndex((h) => /height|altezza|estatura/i.test(h.toLowerCase()) && !/cm/i.test(h));
-          targetColIdx = cmColIdx >= 0 ? cmColIdx : genericColIdx;
-          colIsCm = targetColIdx === cmColIdx;
-        } else {
-          targetColIdx = sec.headers.findIndex((h) => {
-            const hLc = h.toLowerCase().replace(/\s*\(.*?\)\s*/g, "").trim();
-            if (!hLc) return false;
-            return hLc === measLc || hLc.includes(measLc) || measLc.includes(hLc);
-          });
-          colIsCm = targetColIdx >= 0 ? /cm/i.test(sec.headers[targetColIdx] || "") : false;
-        }
-        const sIdx = sizeCol >= 0 ? sizeCol : 0;
-        const hIdx = targetColIdx >= 0 ? targetColIdx : -1;
-        const activeLengthForLookup = (() => {
-          const al2 = (activeLength || "").toLowerCase().trim();
-          if (/big.*tall|tall/.test(al2)) return "Long";
-          if (/^big$/.test(al2)) return "Regular";
-          return activeLength;
-        })();
-        const alLc = (activeLengthForLookup || "").toLowerCase().trim();
-        const matchRow = sec.rows.find((r2) => cellValFn(r2, sIdx, sec.headers[sIdx]) === activeLength) || sec.rows.find((r2) => cellValFn(r2, sIdx, sec.headers[sIdx]).trim().toLowerCase() === alLc) || null;
-        let chartLabel2 = activeLength;
-        let fit2 = "good";
-        if (matchRow && hIdx >= 0) {
-          const rangeStr = cellValFn(matchRow, hIdx, sec.headers[hIdx]);
-          if (rangeStr) {
-            const { min: rMinRaw, max: rMaxRaw } = pRangeFn(rangeStr);
-            if (rMinRaw > 0 && rMaxRaw > 0) {
-              const userInColUnit = colIsCm && userIsInches ? +(userNum2 * 2.54).toFixed(1) : !colIsCm && !userIsInches ? +(userNum2 * 2.54).toFixed(1) : userNum2;
-              const range2 = rMaxRaw - rMinRaw;
-              const threshold2 = range2 > 0 ? range2 * 0.5 : rMinRaw * 0.05 || 3;
-              const tol = colIsCm ? 2.54 : 1;
-              if (userInColUnit > rMinRaw - tol && userInColUnit < rMaxRaw + tol) fit2 = "good";
-              else if (userInColUnit < rMinRaw) {
-                const diff = rMinRaw - userInColUnit;
-                fit2 = diff > threshold2 * 2 ? "too-long" : diff > threshold2 ? "long" : "a-bit-long";
-              } else {
-                const diff = userInColUnit - rMaxRaw;
-                fit2 = diff > threshold2 * 2 ? "too-short" : diff > threshold2 ? "short" : "a-bit-short";
-              }
-              const needsConvert = colIsCm && userIsInches || !colIsCm && !userIsInches;
-              const rMinUser = needsConvert ? colIsCm ? +(rMinRaw / 2.54).toFixed(1) : +(rMinRaw * 2.54).toFixed(1) : rMinRaw;
-              const rMaxUser = needsConvert ? colIsCm ? +(rMaxRaw / 2.54).toFixed(1) : +(rMaxRaw * 2.54).toFixed(1) : rMaxRaw;
-              chartLabel2 = rMinUser === rMaxUser ? `${rMinUser}` : `${rMinUser}-${rMaxUser}`;
-            } else {
-              chartLabel2 = rangeStr;
-            }
-          }
-        }
-        return { area: m2.measurement + " (" + activeLength + ")", userNum: userNum2, chartLabel: cleanNumFn(chartLabel2), fit: fit2, isLength: true };
+        return {
+          area: m2.measurement,
+          userNum: userNum2,
+          chartLabel: cleanNumFn(m2.chartRange),
+          fit: m2.fit || "good",
+          isLength: true
+        };
       }
       const userNum = userMeasurements[m2.measurement.toLowerCase()] || pNumFn(m2.userValue);
-      let { min: rMin, max: rMax } = pRangeFn(m2.chartRange);
-      let chartLabel = m2.chartRange;
-      const alt = chartRangeFor(m2.measurement, displaySize);
-      if (alt) {
-        chartLabel = alt.range;
-        rMin = alt.min;
-        rMax = alt.max;
-      }
-      const range = rMax - rMin;
-      const threshold = range > 0 ? range * 0.5 : rMin * 0.05 || 3;
       const measLower = m2.measurement.toLowerCase();
       const isDirectional = /length|inseam|sleeve|hem|rise/.test(measLower);
-      let fit;
-      const perfectTol = chartUnit === "cm" ? 2.54 : chartUnit === "mm" ? 25.4 : 1;
-      const lowBound = rMin - perfectTol;
-      const highBound = rMax + perfectTol;
-      if (userNum > lowBound && userNum < highBound) {
-        fit = "good";
-      } else if (isDirectional) {
-        const diff = userNum > rMax ? userNum - rMax : rMin - userNum;
-        const bucket = diff > threshold * 2 ? "too-" : diff > threshold ? "" : "a-bit-";
-        fit = bucket + (userNum > rMax ? "short" : "long");
-      } else if (userNum < rMin) {
-        const diff = rMin - userNum;
-        fit = diff > threshold * 2 ? "too-loose" : diff > threshold ? "loose" : "a-bit-loose";
-      } else {
-        const diff = userNum - rMax;
-        fit = diff > threshold * 2 ? "too-tight" : diff > threshold ? "tight" : "a-bit-tight";
-      }
-      return { area: m2.measurement, userNum, chartLabel: cleanNumFn(chartLabel), fit, isLength: isDirectional };
+      return {
+        area: m2.measurement,
+        userNum,
+        chartLabel: cleanNumFn(m2.chartRange),
+        fit: m2.fit || "good",
+        isLength: isDirectional
+      };
     });
-  }, [sectionResult, lengthEntry, userMeasurements, displaySize, recSize, chartRangeFor, selectedLength, recLength, renderRaw]);
+  }, [sectionResult, lengthEntry, userMeasurements, renderRaw]);
   const goodCount = fitRows.filter(
     (r2) => r2.fit === "good" || r2.fit === "a-bit-tight" || r2.fit === "a-bit-loose"
   ).length;
@@ -27672,6 +27668,7 @@ function measurementTypeToVtoCategory(type) {
 function PrimeStyleTryonInner({
   productImage,
   productImages,
+  garmentReferenceImage,
   productTitle = "Product",
   productId,
   productDescription,
@@ -28837,9 +28834,19 @@ function PrimeStyleTryonInner({
         fitInfo = buildFitInfo(effectiveMatchDetails, modelPoseRef.current, unit);
       }
       console.log("[ps-sdk:tryon] fitInfo built", { count: fitInfo?.length || 0, areas: fitInfo?.map((f2) => `${f2.area}(${f2.fit})`) });
+      let garmentImage = productImage;
+      if (garmentReferenceImage) {
+        garmentImage = garmentReferenceImage;
+      } else if (productImages && productImages.length > 1) {
+        const best = await pickBestGarmentImage(productImages);
+        if (best && best !== productImage) {
+          console.log(`[ps-sdk:tryon] auto-picked garment reference: ${best}`);
+          garmentImage = best;
+        }
+      }
       const response = await apiRef.current.submitTryOn(
         modelImage,
-        productImage,
+        garmentImage,
         fitInfo,
         vtoCategory ?? "apparel",
         {
@@ -30326,10 +30333,29 @@ async function mount(el2) {
       props.sizeGuideData = fetched;
     }
   }
+  let shadow;
+  try {
+    shadow = el2.shadowRoot ?? el2.attachShadow({ mode: "open" });
+    injectStylesIntoShadow(shadow);
+  } catch (err) {
+    console.warn(`${TAG} shadow attach failed — falling back to direct mount`, err);
+    shadow = el2;
+  }
+  let mountTarget;
+  if (shadow instanceof ShadowRoot) {
+    mountTarget = shadow.querySelector("[data-primestyle-mount]") ?? (() => {
+      const c = document.createElement("div");
+      c.setAttribute("data-primestyle-mount", "");
+      shadow.appendChild(c);
+      return c;
+    })();
+  } else {
+    mountTarget = shadow;
+  }
   if (props.sizeGuideData) {
     try {
       const buttonStyles = props.buttonStyles;
-      createSizeGuideButton(el2, props.sizeGuideData, {
+      createSizeGuideButton(mountTarget, props.sizeGuideData, {
         accentColor: buttonStyles?.backgroundColor
       });
       console.log(`${TAG} ✓ size guide button mounted`);
@@ -30338,10 +30364,10 @@ async function mount(el2) {
     }
   }
   try {
-    const root = createRoot(el2);
+    const root = createRoot(mountTarget);
     root.render(reactExports.createElement(PrimeStyleTryon, props));
     MOUNTED.set(el2, root);
-    console.log(`${TAG} ✓ mounted React component`);
+    console.log(`${TAG} ✓ mounted React component (shadow-isolated)`);
     maybeFireProductView(el2);
   } catch (err) {
     console.error(`${TAG} ✗ React mount failed`, err);

package/dist/storefront/shadow-style-collector.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Shadow-DOM style collector.
+ *
+ * Vite injects all CSS imported by the storefront bundle as <style>
+ * tags appended to document.head at module-eval time. Theme app
+ * extensions render into the merchant's theme DOM, so those styles
+ * coexist with the merchant's theme CSS — and the theme's CSS leaks
+ * into our widget (table borders, button resets, font-family, etc).
+ *
+ * To isolate the widget inside a shadow root we need our SDK styles
+ * inside that shadow root, NOT in document.head. The cleanest way to
+ * intercept vite's runtime injection is to monkey-patch
+ * `document.head.appendChild` before our other imports evaluate, so
+ * every <style> tag the SDK emits during module load gets captured
+ * here and re-injected into each shadow root we mount later.
+ *
+ * IMPORTANT: this file MUST be imported as the *first* import of
+ * `src/storefront/index.ts`, before React or any CSS-importing module.
+ * ES module evaluation order is import-tree depth-first, so a
+ * side-effect import at the top of the entry runs before the rest.
+ */
+/**
+ * Returns CSS text concatenated from every <style> tag captured at
+ * module load + any <style> tags that were already in document.head
+ * matching SDK selector patterns (defense-in-depth for cases where
+ * patching missed an injection).
+ */
+export declare function getCollectedCss(): string;
+/**
+ * Inject the SDK's collected styles into a shadow root so the widget
+ * looks identical regardless of theme. Idempotent — call once per
+ * shadow root after attachShadow().
+ */
+export declare function injectStylesIntoShadow(shadow: ShadowRoot): void;

package/package.json

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