@primestyleai/tryon 5.10.178 → 5.10.179

package/dist/react/types.d.ts

@@ -228,6 +228,8 @@ export interface PrimeStyleTryonProps {
      *  the fabric correctly without guessing from the image alone. */
     productMaterial?: string;
     buttonText?: string;
+    /** When true, a completed try-on for this product turns the storefront button into a saved fit result. */
+    limitOneColorTryOnPerProduct?: boolean;
     apiUrl?: string;
     showPoweredBy?: boolean;
     /** Show the default camera icon in the button. Defaults to true. Set to false to hide it. */

package/dist/sizing/fit-compute.d.ts

@@ -24,9 +24,9 @@ export declare function buildFitInfo(matchDetails: Array<{
 }>, poseLines?: MeasurementLines | null, unit?: "in" | "cm" | "mm"): FitAreaInfo[];
 /**
  * Build silhouette-prompt context forwarded to the backend try-on Gemini
- * call. Returns the three text-form inputs that the doc example fed to
- * Gemini (user raw measurements, recommended size, chart summary) so the
- * try-on prompt can reason about absolute values and the chart's grading.
+ * call. Returns only the selected fit context Gemini needs: user raw
+ * measurements, recommended size, and the chosen size's measurement row.
+ * The full product size guide is intentionally not forwarded to try-on.
  *
  * All fields optional — returns `undefined` when there's nothing useful
  * to add (e.g. accessory flow, no sizingResult).
@@ -70,7 +70,6 @@ selectedSizeOverride?: string,
 userHeight?: string, userWeight?: string): {
     recommendedSize?: string;
     recommendedSizeMeasurements?: string;
-    sizeChartSummary?: string;
     userMeasurementsText?: string;
     userHeight?: string;
     userWeight?: string;

package/dist/storefront/primestyle-tryon.js

@@ -10225,6 +10225,52 @@ function parseNum(s) {
   const n2 = parseFloat(s.replace(/[^\d.]/g, ""));
   return isNaN(n2) ? 0 : n2;
 }
+function normalizeUnit(unit) {
+  const u2 = (unit || "").toLowerCase();
+  if (u2 === "in" || u2 === "inch" || u2 === "inches") return "in";
+  if (u2 === "cm") return "cm";
+  if (u2 === "mm") return "mm";
+  return null;
+}
+function detectUnitFromText(text) {
+  const t2 = String(text || "");
+  if (/\bmm\b/i.test(t2)) return "mm";
+  if (/\bcm\b/i.test(t2)) return "cm";
+  if (/\bin\b|inch|inches|["”]/i.test(t2)) return "in";
+  return null;
+}
+function convertValue(value, from, to) {
+  if (from === to) return value;
+  const inMm = from === "mm" ? value : from === "cm" ? value * 10 : value * 25.4;
+  if (to === "mm") return inMm;
+  if (to === "cm") return inMm / 10;
+  return inMm / 25.4;
+}
+function formatUnitNumber(value, unit) {
+  const precision = unit === "mm" ? 0 : 1;
+  const rounded = Number(value.toFixed(precision));
+  return Number.isInteger(rounded) ? String(rounded) : String(rounded);
+}
+function convertNumberTextToUnit(text, from, to) {
+  if (from === to) return text;
+  const converted = text.replace(/\s*(cm|mm|in|inch|inches)\b/ig, "").replace(/(\d+(?:\.\d+)?)/g, (raw) => formatUnitNumber(convertValue(Number(raw), from, to), to)).trim();
+  return converted ? `${converted} ${to}` : text;
+}
+function normalizeMeasurementValueText(measurement, value, targetUnit) {
+  if (isUnitlessShoeSizeMeasurement(measurement)) return formatUserMeasurementValue(measurement, value);
+  const sourceUnit = detectUnitFromText(value);
+  if (sourceUnit) return convertNumberTextToUnit(value, sourceUnit, targetUnit);
+  const trimmed = String(value || "").trim();
+  return /\d/.test(trimmed) ? `${trimmed} ${targetUnit}` : trimmed;
+}
+function normalizeRangeText(range, targetUnit, header) {
+  const sourceUnit = detectUnitFromText(range) || detectUnitFromText(header);
+  if (!sourceUnit) return String(range || "").trim();
+  return convertNumberTextToUnit(range, sourceUnit, targetUnit);
+}
+function promptHeaderLabel(header) {
+  return String(header || "").replace(/\s*\((?:cm|mm|in|inch|inches)\)\s*/ig, "").trim();
+}
 function isUnitlessShoeSizeMeasurement(measurement) {
   const normalized = measurement.toLowerCase().replace(/\s*\(.*?\)\s*/g, " ").trim();
   if (/foot\s*length|length\s*\(cm\)|cm\s*\/\s*jp|mondo|mondopoint/i.test(normalized)) return false;
@@ -10235,11 +10281,15 @@ function formatUserMeasurementValue(measurement, value) {
   return value.replace(/\s*(cm|mm|in|inch|inches)\b/ig, "").trim();
 }
 function computeFit(userValue, chartRange, unit) {
-  const { min: rMin, max: rMax } = parseRange(chartRange);
+  const targetUnit = normalizeUnit(unit) || detectUnitFromText(chartRange) || "in";
+  const chartUnit = detectUnitFromText(chartRange);
+  const parsed = parseRange(chartRange);
+  const rMin = chartUnit && chartUnit !== targetUnit ? convertValue(parsed.min, chartUnit, targetUnit) : parsed.min;
+  const rMax = chartUnit && chartUnit !== targetUnit ? convertValue(parsed.max, chartUnit, targetUnit) : parsed.max;
   if (rMin === 0 && rMax === 0) return "good";
-  const perfectTol = unit === "cm" ? 1.27 : unit === "mm" ? 12.7 : 0.5;
-  const aBitTol = unit === "cm" ? 2.54 : unit === "mm" ? 25.4 : 1;
-  const tooFarTol = unit === "cm" ? 5.08 : unit === "mm" ? 50.8 : 2;
+  const perfectTol = targetUnit === "cm" ? 1.27 : targetUnit === "mm" ? 12.7 : 0.5;
+  const aBitTol = targetUnit === "cm" ? 2.54 : targetUnit === "mm" ? 25.4 : 1;
+  const tooFarTol = targetUnit === "cm" ? 5.08 : targetUnit === "mm" ? 50.8 : 2;
   const inRange = userValue >= rMin && userValue <= rMax;
   const overEdge = inRange ? 0 : userValue > rMax ? userValue - rMax : rMin - userValue;
   if (inRange || overEdge <= perfectTol) return "good";
@@ -10262,14 +10312,17 @@ const SKIP_AREAS_FOR_FIT = /* @__PURE__ */ new Set([
 ]);
 function buildFitInfo(matchDetails, poseLines, unit) {
   return matchDetails.filter((m2) => !SKIP_AREAS_FOR_FIT.has(m2.measurement.toLowerCase().replace(/\s*\(.*?\)\s*/g, "").trim())).map((m2) => {
-    const userNum = parseNum(m2.userValue);
-    const fit = computeFit(userNum, m2.chartRange, unit);
+    const targetUnit = normalizeUnit(unit) || detectUnitFromText(m2.userValue) || detectUnitFromText(m2.chartRange) || "in";
+    const userValueText = normalizeMeasurementValueText(m2.measurement, m2.userValue, targetUnit);
+    const chartRangeText = normalizeRangeText(m2.chartRange, targetUnit);
+    const userNum = parseNum(userValueText);
+    const fit = computeFit(userNum, chartRangeText, targetUnit);
     const info = {
       area: m2.measurement,
       section: m2.section || void 0,
       fit,
       userValue: userNum || void 0,
-      garmentRange: m2.chartRange || void 0
+      garmentRange: chartRangeText || void 0
     };
     if (poseLines) {
       const poseKey = AREA_TO_POSE_KEY[m2.measurement.toLowerCase()];
@@ -10286,6 +10339,7 @@ function buildFitInfo(matchDetails, poseLines, unit) {
 function buildSilhouetteContext(sizingResult, sizeGuide, selectedSizeOverride, userHeight, userWeight) {
   if (!sizingResult && !sizeGuide && !userHeight && !userWeight) return void 0;
   const out = {};
+  const promptUnit = normalizeUnit(sizingResult?.unit) || detectUnitFromText(sizingResult?.matchDetails?.[0]?.userValue) || detectUnitFromText(Object.values(sizingResult?.sections || {})[0]?.matchDetails?.[0]?.userValue) || "in";
   const baseSize = (selectedSizeOverride || sizingResult?.recommendedSize || "").toString().trim();
   if (userHeight) out.userHeight = userHeight;
   if (userWeight) out.userWeight = userWeight;
@@ -10311,7 +10365,7 @@ function buildSilhouetteContext(sizingResult, sizeGuide, selectedSizeOverride, u
           chartRowFit = vStr;
           continue;
         }
-        if (vStr) bits.push(`${h} ${vStr}`);
+        if (vStr) bits.push(`${promptHeaderLabel(h) || h} ${normalizeRangeText(vStr, promptUnit, h)}`);
         if (chartRowLength == null && /^length\b|inseam/i.test(h) && vStr) {
           chartRowLength = vStr;
         }
@@ -10360,7 +10414,7 @@ function buildSilhouetteContext(sizingResult, sizeGuide, selectedSizeOverride, u
             const h = (secChart.headers[i] || "").trim();
             const baseHeader = h.replace(/\s*\(.*?\)\s*/g, "").trim();
             if (vStr && !/^(size|standard|country|fit|silhouette|category|body[\s_]?type|eu|uk|us|it|jp|cn|kr|ru|br|au)$/i.test(baseHeader)) {
-              bits.push(`${h} ${vStr}`);
+              bits.push(`${promptHeaderLabel(h) || h} ${normalizeRangeText(vStr, promptUnit, h)}`);
             }
           }
           if (bits.length) measurementParts.push(`${cleanSec} ${secSize}: ${bits.join(", ")}`);
@@ -10370,29 +10424,33 @@ function buildSilhouetteContext(sizingResult, sizeGuide, selectedSizeOverride, u
     if (labelParts.length) out.recommendedSize = labelParts.join(", ");
     if (measurementParts.length) out.recommendedSizeMeasurements = measurementParts.join(" | ");
   }
-  const seen = /* @__PURE__ */ new Set();
+  const seenUserMeasurements = /* @__PURE__ */ new Set();
+  const seenSelectedMeasurements = /* @__PURE__ */ new Set();
   const userLines = [];
-  const push = (md2) => {
+  const selectedMeasurementLines = [];
+  const push = (md2, sectionName) => {
     if (!md2) return;
     for (const m2 of md2) {
-      const k2 = m2.measurement.toLowerCase();
-      if (seen.has(k2)) continue;
-      seen.add(k2);
-      if (m2.userValue) userLines.push(`${m2.measurement} ${formatUserMeasurementValue(m2.measurement, m2.userValue)}`);
+      const normalizedMeasurement = m2.measurement.toLowerCase().replace(/\s*\(.*?\)\s*/g, "").trim();
+      if (SKIP_AREAS_FOR_FIT.has(normalizedMeasurement)) continue;
+      const selectedKey = sectionName ? `${sectionName.toLowerCase()}:${normalizedMeasurement}` : normalizedMeasurement;
+      if (m2.userValue && !seenUserMeasurements.has(normalizedMeasurement)) {
+        seenUserMeasurements.add(normalizedMeasurement);
+        userLines.push(`${m2.measurement} ${normalizeMeasurementValueText(m2.measurement, m2.userValue, promptUnit)}`);
+      }
+      if (m2.chartRange && !seenSelectedMeasurements.has(selectedKey)) {
+        seenSelectedMeasurements.add(selectedKey);
+        const prefix = sectionName ? `${sectionName} ${m2.measurement}` : m2.measurement;
+        selectedMeasurementLines.push(`${prefix} ${normalizeRangeText(m2.chartRange, promptUnit)}`);
+      }
     }
   };
   push(sizingResult?.matchDetails);
   if (sizingResult?.sections) {
-    for (const sec of Object.values(sizingResult.sections)) push(sec.matchDetails);
+    for (const [secName, sec] of Object.entries(sizingResult.sections)) push(sec.matchDetails, secName);
   }
   if (userLines.length) out.userMeasurementsText = userLines.join(", ");
-  if (sizeGuide?.headers?.length && sizeGuide.rows?.length) {
-    const hdrs = sizeGuide.headers;
-    const rowStrings = sizeGuide.rows.slice(0, 20).map(
-      (row) => hdrs.map((h, i) => `${h} ${row[i] ?? "—"}`).join(", ")
-    );
-    out.sizeChartSummary = rowStrings.join(" | ");
-  }
+  if (selectedMeasurementLines.length) out.recommendedSizeMeasurements = selectedMeasurementLines.join(", ");
   return Object.keys(out).length ? out : void 0;
 }
 const FALLBACK_FIELDS_FEMALE = [
@@ -11627,7 +11685,7 @@ function productFitTypeToMeasurementType(fitType) {
   }
   return "body";
 }
-const STYLES$1 = `
+const STYLES = `
   /* Variable defaults must live on BOTH the root (for the trigger button)
      and the overlay (which is React-portaled to <body> and therefore not
      a descendant of .ps-tryon-root, so the cascade is broken). Without
@@ -11694,6 +11752,7 @@ const STYLES$1 = `
     position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
     display: flex; align-items: center; justify-content: center;
     z-index: 2147483647;
+    pointer-events: auto;
     isolation: isolate;
     contain: layout style;
     padding: 0.83vw;
@@ -12183,11 +12242,20 @@ const STYLES$1 = `
     min-height: 0;
   }
   .ps-tryon-v2-result-panel .ps-tryon-photo-strip {
-    flex: 0 1 auto;
+    flex: 0 0 auto;
     min-height: 0;
+    margin-top: clamp(10px, 0.75vw, 14px);
+    margin-bottom: clamp(8px, 0.7vw, 12px);
   }
   .ps-tryon-v2-result-panel .ps-tryon-sr-card-v2 {
-    min-height: 10.5vw;
+    min-height: clamp(140px, 10.5vw, 165px);
+  }
+  .ps-tryon-v2-result-panel .ps-tryon-sr-card-v2.ps-full {
+    min-height: clamp(140px, 10.5vw, 165px);
+  }
+  .ps-tryon-v2-result-panel .ps-tryon-photo-strip-cell {
+    aspect-ratio: 1 / 1;
+    height: auto;
   }
   .ps-tryon-v2-result-actions {
     display: flex;
@@ -12682,9 +12750,12 @@ const STYLES$1 = `
   .ps-tryon-photo-strip-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 0.55vw;
+    gap: 0.45vw;
     animation: ps-tryon-photo-strip-fade 0.5s ease;
   }
+  .ps-tryon-photo-strip-row.ps-count-1 .ps-tryon-photo-strip-cell {
+    grid-column: 2;
+  }
   .ps-tryon-photo-strip-cell {
     position: relative;
     display: block;
@@ -12707,7 +12778,7 @@ const STYLES$1 = `
     object-position: center center;
     padding: 0;
     box-sizing: border-box;
-    transform: scale(0.94);
+    transform: none;
     transform-origin: center center;
     user-select: none;
     pointer-events: none;
@@ -12748,7 +12819,7 @@ const STYLES$1 = `
     }
     .ps-tryon-photo-strip-cell > img {
       object-position: center center;
-      transform: scale(0.94);
+      transform: none;
     }
   }
 
@@ -22269,7 +22340,7 @@ function ProductPhotoCarouselCard({
   const slide = entries.slice(start, start + PER_SLIDE);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-photo-strip", role: "group", "aria-label": t2("Product photos"), children: [
     isCompleteLook && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-photo-strip-head", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-photo-strip-badge", children: t2("Complete the look") }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-photo-strip-row", style: { gridTemplateColumns: `repeat(${Math.max(1, Math.min(PER_SLIDE, slide.length))}, 1fr)` }, children: slide.map((item, i) => {
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `ps-tryon-photo-strip-row ps-count-${slide.length}`, children: slide.map((item, i) => {
       const content = /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: item.image, alt: item.title || productTitle || "", draggable: false });
       return item.href ? /* @__PURE__ */ jsxRuntimeExports.jsx(
         "a",
@@ -32102,7 +32173,7 @@ if (typeof document !== "undefined") {
   if (!document.getElementById(id2)) {
     const el2 = document.createElement("style");
     el2.id = id2;
-    el2.textContent = STYLES$1;
+    el2.textContent = STYLES;
     document.head.appendChild(el2);
   }
 }
@@ -32154,6 +32225,27 @@ function sanitizeHistoryEntry(entry) {
     hasResult: entry.hasResult || !!entry.resultImageUrl || void 0
   };
 }
+function comparableProductId(value) {
+  return String(value || "").trim().replace(/^gid:\/\/shopify\/Product\//i, "").replace(/^Product\//i, "");
+}
+function historyEntryMatchesProduct(entry, productId, productTitle) {
+  const currentId = comparableProductId(productId);
+  const entryId = comparableProductId(entry.productId);
+  if (currentId && entryId) return currentId === entryId;
+  const currentTitle = String(productTitle || "").trim().toLowerCase();
+  const entryTitle = String(entry.productTitle || "").trim().toLowerCase();
+  return !!currentTitle && !!entryTitle && currentTitle === entryTitle;
+}
+function hasCompletedTryOnResult(entry) {
+  return !!(entry.resultImageUrl || entry.hasResult);
+}
+function dispatchTryOnCompleteEvent(detail) {
+  if (typeof window === "undefined") return;
+  try {
+    window.dispatchEvent(new CustomEvent("primestyle:tryon-complete", { detail }));
+  } catch {
+  }
+}
 function computeMatchScore(recData) {
   if (!recData) return null;
   const all = [];
@@ -32209,6 +32301,7 @@ function PrimeStyleTryonInner({
   productDescription,
   productMaterial,
   buttonText,
+  limitOneColorTryOnPerProduct = false,
   apiUrl,
   showPoweredBy = true,
   showIcon = true,
@@ -33201,6 +33294,14 @@ function PrimeStyleTryonInner({
         cleanupJob();
         setTryOnProcessing(false);
         setTryOnStartedAt(null);
+        dispatchTryOnCompleteEvent({
+          jobId: update.galleryId,
+          historyEntryId: currentHistoryEntryIdRef.current,
+          productId: effectiveProductId,
+          productTitle,
+          recommendedSize: sizingResultRef.current?.recommendedSize,
+          resultImageUrl: update.imageUrl
+        });
         onComplete?.({ jobId: update.galleryId, imageUrl: update.imageUrl });
       }
     } else if (update.status === "failed") {
@@ -34404,6 +34505,21 @@ function PrimeStyleTryonInner({
     setDrawer(null);
     setView("size-result");
   }, [cleanupJob, productId, productTitle, effectiveProductImages, effectiveProductCarouselItems]);
+  const savedOneColorFitEntry = reactExports.useMemo(() => {
+    if (!limitOneColorTryOnPerProduct) return null;
+    return history.find(
+      (entry) => hasCompletedTryOnResult(entry) && !!entry.recommendedSize && historyEntryMatchesProduct(entry, effectiveProductId, productTitle)
+    ) || null;
+  }, [limitOneColorTryOnPerProduct, history, effectiveProductId, productTitle]);
+  const storefrontButtonText = savedOneColorFitEntry?.recommendedSize ? `${t2("Your size is")} ${savedOneColorFitEntry.recommendedSize}` : resolvedButtonText;
+  const handleStorefrontButtonClick = reactExports.useCallback(() => {
+    if (savedOneColorFitEntry) {
+      onOpen?.();
+      restoreHistory(savedOneColorFitEntry);
+      return;
+    }
+    handleOpen();
+  }, [handleOpen, onOpen, restoreHistory, savedOneColorFitEntry]);
   const updateField = reactExports.useCallback((key, val) => {
     formRef.current[key] = val;
   }, []);
@@ -34873,15 +34989,12 @@ function PrimeStyleTryonInner({
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "button",
       {
-        onClick: (e) => {
-          console.log("[ps-sdk] button click event fired", e);
-          handleOpen();
-        },
+        onClick: handleStorefrontButtonClick,
         className: cx(cx("ps-tryon-btn", isTextTrigger ? "ps-tryon-btn--text" : void 0), cn.button),
         type: "button",
         children: [
           !isTextTrigger && showIcon !== false && (buttonIcon || /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, {})),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: resolvedButtonText })
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: storefrontButtonText })
         ]
       }
     ),
@@ -35159,7 +35272,7 @@ class PrimeStyleTryonErrorBoundary extends reactExports.Component {
 function PrimeStyleTryon(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(PrimeStyleTryonErrorBoundary, { ...props });
 }
-const STYLES = `
+const SIZE_GUIDE_STYLES = `
   .ps-sg-btn {
     display: inline-flex;
     align-items: center;
@@ -35322,7 +35435,7 @@ function injectStyles() {
   if (stylesInjected) return;
   const tag = document.createElement("style");
   tag.id = "ps-sg-styles";
-  tag.textContent = STYLES;
+  tag.textContent = SIZE_GUIDE_STYLES;
   document.head.appendChild(tag);
   stylesInjected = true;
 }
@@ -35514,10 +35627,112 @@ function installProductViewTracking() {
   roots.forEach((r2) => maybeFireProductView(r2));
 }
 const TAG = "[primestyle-tryon]";
-console.log(`${TAG} bundle loaded — version 5.7.x storefront entry`);
+const SHADOW_STYLE_ATTR = "data-primestyle-sdk";
+const DOCUMENT_STYLE_ATTR = "data-primestyle-sdk-document";
+const SHADOW_MOUNT_ATTR = "data-primestyle-mount";
+const PORTAL_HOST_ATTR = "data-primestyle-portal-host";
+const PORTAL_MOUNT_ATTR = "data-primestyle-portal-mount";
+const SDK_CSS = `${STYLES}
+
+${SIZE_GUIDE_STYLES}`;
+console.log(`${TAG} storefront bundle loaded`);
 installCartHook();
 installProductViewTracking();
 const MOUNTED = /* @__PURE__ */ new WeakMap();
+const MOUNT_SIGNATURES = /* @__PURE__ */ new WeakMap();
+const MOUNTING = /* @__PURE__ */ new WeakSet();
+function ensureDocumentStyles() {
+  if (typeof document === "undefined" || !document.head) return;
+  let styleTag = document.head.querySelector(`style[${DOCUMENT_STYLE_ATTR}]`);
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.setAttribute(DOCUMENT_STYLE_ATTR, "true");
+    document.head.appendChild(styleTag);
+  }
+  if (styleTag.textContent !== SDK_CSS) {
+    styleTag.textContent = SDK_CSS;
+  }
+}
+function getPortalHost() {
+  if (typeof document === "undefined" || !document.body) return void 0;
+  let portalHost = document.querySelector(`[${PORTAL_HOST_ATTR}]`);
+  if (!portalHost) {
+    portalHost = document.createElement("div");
+    portalHost.setAttribute(PORTAL_HOST_ATTR, "true");
+    document.body.appendChild(portalHost);
+  }
+  portalHost.style.setProperty("display", "block", "important");
+  portalHost.style.setProperty("position", "fixed", "important");
+  portalHost.style.setProperty("inset", "0", "important");
+  portalHost.style.setProperty("width", "100vw", "important");
+  portalHost.style.setProperty("height", "100vh", "important");
+  portalHost.style.setProperty("z-index", "2147483647", "important");
+  portalHost.style.setProperty("visibility", "visible", "important");
+  portalHost.style.setProperty("opacity", "1", "important");
+  portalHost.style.setProperty("pointer-events", "none", "important");
+  portalHost.style.setProperty("transform", "none", "important");
+  portalHost.style.setProperty("margin", "0", "important");
+  portalHost.style.setProperty("padding", "0", "important");
+  if (typeof portalHost.attachShadow === "function") {
+    try {
+      const shadow = portalHost.shadowRoot || portalHost.attachShadow({ mode: "open" });
+      let styleTag = shadow.querySelector(`style[${SHADOW_STYLE_ATTR}]`);
+      if (!styleTag) {
+        styleTag = document.createElement("style");
+        styleTag.setAttribute(SHADOW_STYLE_ATTR, "true");
+        shadow.appendChild(styleTag);
+      }
+      if (styleTag.textContent !== SDK_CSS) {
+        styleTag.textContent = SDK_CSS;
+      }
+      let portalMount = shadow.querySelector(`[${PORTAL_MOUNT_ATTR}]`);
+      if (!portalMount) {
+        portalMount = document.createElement("div");
+        portalMount.setAttribute(PORTAL_MOUNT_ATTR, "true");
+        portalMount.className = "ps-tryon-portal-mount";
+        shadow.appendChild(portalMount);
+      }
+      portalMount.style.setProperty("display", "block", "important");
+      portalMount.style.setProperty("width", "100%", "important");
+      portalMount.style.setProperty("height", "100%", "important");
+      portalMount.style.setProperty("pointer-events", "none", "important");
+      return portalMount;
+    } catch (err) {
+      console.warn(`${TAG} portal shadow DOM mount failed; falling back to page DOM`, err);
+    }
+  }
+  ensureDocumentStyles();
+  return portalHost;
+}
+function createShadowMountTarget(el2) {
+  if (!(el2 instanceof HTMLElement) || typeof el2.attachShadow !== "function") {
+    return { mountTarget: el2 };
+  }
+  try {
+    const shadow = el2.shadowRoot || el2.attachShadow({ mode: "open" });
+    let styleTag = shadow.querySelector(`style[${SHADOW_STYLE_ATTR}]`);
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.setAttribute(SHADOW_STYLE_ATTR, "true");
+      shadow.appendChild(styleTag);
+    }
+    if (styleTag.textContent !== SDK_CSS) {
+      styleTag.textContent = SDK_CSS;
+    }
+    let mountTarget = shadow.querySelector(`[${SHADOW_MOUNT_ATTR}]`);
+    if (!mountTarget) {
+      mountTarget = document.createElement("div");
+      mountTarget.setAttribute(SHADOW_MOUNT_ATTR, "true");
+      mountTarget.className = "ps-tryon-shadow-mount";
+      shadow.appendChild(mountTarget);
+    }
+    el2.setAttribute("data-primestyle-shadow", "true");
+    return { mountTarget, portalContainer: getPortalHost() ?? document.body };
+  } catch (err) {
+    console.warn(`${TAG} shadow DOM mount failed; falling back to page DOM`, err);
+    return { mountTarget: el2 };
+  }
+}
 function readDataAttrs(el2) {
   const out = {};
   for (const attr of Array.from(el2.attributes)) {
@@ -35536,6 +35751,13 @@ function parseJsonAttr(raw, fallback) {
     return fallback;
   }
 }
+function buildMountSignature(data) {
+  const relevant = {};
+  for (const key of Object.keys(data).sort()) {
+    relevant[key] = data[key];
+  }
+  return JSON.stringify(relevant);
+}
 function resolveProductUrl(raw) {
   const source = raw || (typeof window !== "undefined" ? window.location.href : "");
   if (!source) return void 0;
@@ -35556,13 +35778,18 @@ function buildPropsFromDataAttrs(data) {
     productTitle: data.productTitle,
     productUrl: resolveProductUrl(data.productUrl),
     productImage: data.productImage,
-    productCarouselItems: parseJsonAttr(data.productCarouselItems, void 0),
+    productImages: parseJsonAttr(data.productImages, void 0),
+    productCarouselItems: parseJsonAttr(
+      data.productCarouselItems,
+      void 0
+    ),
     productDescription: data.productDescription,
     productGender: data.productGender,
     productType: data.productType,
     productVendor: data.productVendor,
     productTags: data.productTags ? data.productTags.split(",").map((t2) => t2.trim()).filter(Boolean) : void 0,
     buttonText: data.buttonText || "Find Your Size",
+    limitOneColorTryOnPerProduct: data.limitOneColorTryOnPerProduct === "true",
     locale: data.locale,
     sizeGuideData: parseJsonAttr(data.cachedSizeguide, void 0),
     sizingCountry: data.sizingCountry,
@@ -35599,22 +35826,39 @@ async function fetchSizeGuideForProduct(proxyUrl, productId) {
   }
 }
 async function mount(el2) {
-  if (MOUNTED.has(el2)) {
-    console.log(`${TAG} already mounted on`, el2);
+  const data = readDataAttrs(el2);
+  const signature = buildMountSignature(data);
+  const existingRoot = MOUNTED.get(el2);
+  if (existingRoot) {
+    if (MOUNT_SIGNATURES.get(el2) === signature) {
+      console.log(`${TAG} already mounted on`, el2);
+      return;
+    }
+    console.log(`${TAG} data changed; remounting on`, el2);
+    try {
+      existingRoot.unmount();
+    } catch (err) {
+      console.warn(`${TAG} previous React root failed to unmount`, err);
+    }
+    MOUNTED.delete(el2);
+    MOUNT_SIGNATURES.delete(el2);
+  }
+  if (MOUNTING.has(el2)) {
+    console.log(`${TAG} mount already in progress on`, el2);
     return;
   }
+  MOUNTING.add(el2);
   console.log(`${TAG} mounting on element`, el2);
-  const data = readDataAttrs(el2);
   console.log(`${TAG} read data attributes`, data);
   const props = buildPropsFromDataAttrs(data);
-  const hadCachedSizeguide = !!data.cachedSizeguide;
+  const shouldRenderStandaloneSizeGuide = !!data.cachedSizeguide && data.disableSizeGuideButton !== "true";
   if (!props.sizeGuideData && props.productId && props.apiUrl) {
     const fetched = await fetchSizeGuideForProduct(props.apiUrl, props.productId);
     if (fetched) {
       props.sizeGuideData = fetched;
     }
   }
-  if (hadCachedSizeguide && props.sizeGuideData) {
+  if (shouldRenderStandaloneSizeGuide && props.sizeGuideData) {
     try {
       const buttonStyles = props.buttonStyles;
       createSizeGuideButton(el2, props.sizeGuideData, {
@@ -35626,13 +35870,22 @@ async function mount(el2) {
     }
   }
   try {
-    const root = createRoot(el2);
-    root.render(reactExports.createElement(PrimeStyleTryon, props));
+    const { mountTarget, portalContainer } = createShadowMountTarget(el2);
+    const root = createRoot(mountTarget);
+    root.render(
+      reactExports.createElement(PrimeStyleTryon, {
+        ...props,
+        portalContainer
+      })
+    );
     MOUNTED.set(el2, root);
+    MOUNT_SIGNATURES.set(el2, signature);
     console.log(`${TAG} ✓ mounted React component`);
     maybeFireProductView(el2);
   } catch (err) {
     console.error(`${TAG} ✗ React mount failed`, err);
+  } finally {
+    MOUNTING.delete(el2);
   }
 }
 function mountAll() {

package/dist/storefront/size-guide-modal.d.ts

@@ -29,6 +29,7 @@ interface ButtonOptions {
     label?: string;
     accentColor?: string;
 }
+export declare const SIZE_GUIDE_STYLES = "\n  .ps-sg-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 14px;\n    margin: 0 0 10px 0;\n    background: transparent;\n    border: 1px solid rgba(0, 0, 0, 0.12);\n    border-radius: 8px;\n    color: var(--ps-sg-accent, #2154EF);\n    font-size: 13px;\n    font-weight: 600;\n    font-family: inherit;\n    cursor: pointer;\n    transition: background 0.15s, border-color 0.15s;\n  }\n  .ps-sg-btn:hover {\n    background: rgba(33, 84, 239, 0.04);\n    border-color: var(--ps-sg-accent, #2154EF);\n  }\n  .ps-sg-btn svg { width: 14px; height: 14px; }\n  .ps-sg-overlay {\n    position: fixed; inset: 0;\n    background: rgba(15, 23, 42, 0.55);\n    display: flex; align-items: center; justify-content: center;\n    z-index: 99999;\n    padding: 16px;\n    opacity: 0;\n    animation: ps-sg-fadein 0.18s ease forwards;\n  }\n  @keyframes ps-sg-fadein { to { opacity: 1; } }\n  .ps-sg-modal {\n    background: #FFFFFF;\n    border-radius: 14px;\n    width: 100%;\n    max-width: 720px;\n    max-height: 88vh;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    color: #1f2937;\n  }\n  .ps-sg-header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: 18px 22px 14px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-title {\n    margin: 0;\n    font-size: 17px;\n    font-weight: 700;\n  }\n  .ps-sg-toggle {\n    display: inline-flex;\n    background: rgba(15, 23, 42, 0.06);\n    border-radius: 8px;\n    padding: 3px;\n    margin-right: 12px;\n  }\n  .ps-sg-toggle button {\n    padding: 5px 14px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 700;\n    cursor: pointer;\n    color: rgba(15, 23, 42, 0.55);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    font-family: inherit;\n  }\n  .ps-sg-toggle button.ps-sg-active {\n    background: #FFFFFF;\n    color: #1f2937;\n    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-close {\n    background: transparent;\n    border: none;\n    color: rgba(15, 23, 42, 0.55);\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 6px;\n    font-family: inherit;\n  }\n  .ps-sg-close:hover { background: rgba(15, 23, 42, 0.06); }\n  .ps-sg-close svg { width: 18px; height: 18px; }\n  .ps-sg-body {\n    padding: 18px 22px 22px;\n    overflow-y: auto;\n    flex: 1;\n  }\n  .ps-sg-section { margin-bottom: 22px; }\n  .ps-sg-section:last-child { margin-bottom: 0; }\n  .ps-sg-section-title {\n    margin: 0 0 6px;\n    font-size: 14px;\n    font-weight: 700;\n    color: #0f172a;\n  }\n  .ps-sg-section-desc {\n    margin: 0 0 10px;\n    font-size: 12px;\n    color: rgba(15, 23, 42, 0.6);\n  }\n  .ps-sg-table-wrap {\n    overflow-x: auto;\n    border: 1px solid rgba(15, 23, 42, 0.08);\n    border-radius: 10px;\n  }\n  .ps-sg-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 13px;\n  }\n  .ps-sg-table thead th {\n    background: rgba(15, 23, 42, 0.04);\n    padding: 10px 12px;\n    text-align: left;\n    font-weight: 700;\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: rgba(15, 23, 42, 0.6);\n    border-bottom: 1px solid rgba(15, 23, 42, 0.08);\n  }\n  .ps-sg-table tbody td {\n    padding: 10px 12px;\n    border-bottom: 1px solid rgba(15, 23, 42, 0.05);\n  }\n  .ps-sg-table tbody tr:last-child td { border-bottom: none; }\n  .ps-sg-htm {\n    margin-top: 18px;\n    padding: 14px 16px;\n    background: rgba(33, 84, 239, 0.05);\n    border-radius: 10px;\n    border: 1px solid rgba(33, 84, 239, 0.12);\n  }\n  .ps-sg-htm-title {\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    color: var(--ps-sg-accent, #2154EF);\n    margin-bottom: 8px;\n  }\n  .ps-sg-htm ul {\n    margin: 0;\n    padding-left: 18px;\n    font-size: 12px;\n    line-height: 1.6;\n    color: #1f2937;\n  }\n";
 /**
  * Create a "Size Guide" button and insert it as a sibling above the
  * given parent element. Returns a teardown function that removes the

package/dist/types.d.ts

@@ -260,9 +260,9 @@ export interface FitAreaInfo {
     section?: string;
     /** Fit classification */
     fit: "good" | "tight" | "loose" | "a-bit-tight" | "a-bit-loose" | "too-tight" | "too-loose";
-    /** User's measurement value in cm */
+    /** User's measurement value in the same unit as garmentRange */
     userValue?: number;
-    /** Garment's size chart range for this area (e.g. "96-100") */
+    /** Garment's selected-size range for this area (e.g. "37-38 in") */
     garmentRange?: string;
     /** Normalised body coordinate — vertical position (0 = top, 1 = bottom) */
     y?: number;

package/package.json

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