@primestyleai/tryon 5.10.0 → 5.10.2

package/dist/react/index.js

@@ -840,12 +840,15 @@ const STYLES = `
   .ps-tryon-logo-img { height: var(--ps-logo-height); width: auto; }
   .ps-tryon-header-actions { display: flex; align-items: center; gap: 0.42vw; }
   .ps-tryon-header-icon {
-    width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;
-    border: 1.5px solid var(--ps-border-color); border-radius: 0.52vw; background: transparent;
+    /* Pure vw sizing collapsed to ~8 px on 375 px mobile. Clamp so the icon
+       stays finger-tappable (min 30 px) while scaling up on large screens. */
+    width: clamp(30px, 2.2vw, 34px); height: clamp(30px, 2.2vw, 34px);
+    display: flex; align-items: center; justify-content: center;
+    border: 1.5px solid var(--ps-border-color); border-radius: clamp(6px, 0.52vw, 10px); background: transparent;
     cursor: pointer; color: var(--ps-text-secondary); transition: all 0.2s;
   }
   .ps-tryon-header-icon:hover { border-color: var(--ps-accent); color: var(--ps-accent); }
-  .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: 0.9vw; height: 0.9vw; }
+  .ps-tryon-header-icon svg { stroke: currentColor; fill: none; width: clamp(14px, 0.9vw, 16px); height: clamp(14px, 0.9vw, 16px); }
   .ps-tryon-close {
     width: 2.2vw; height: 2.2vw; display: flex; align-items: center; justify-content: center;
     background: none; border: none; color: var(--ps-modal-close-color, #999);
@@ -893,7 +896,10 @@ const STYLES = `
   }
 
   .ps-tryon-lang-list {
-    max-height: min(18vw, 280px); overflow-y: auto; padding: clamp(3px, 0.31vw, 5px);
+    /* max(...) picks the larger of the two values so the dropdown is tall
+       enough to scroll through a handful of languages on any viewport.
+       Pure min(18vw, 280px) collapsed to ~67 px on 375 px mobile. */
+    max-height: max(260px, min(18vw, 280px)); overflow-y: auto; padding: clamp(3px, 0.31vw, 5px);
     scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.15) transparent;
   }
   .ps-tryon-lang-item {
@@ -3286,6 +3292,33 @@ const STYLES = `
 
     /* ── Preserve existing previews and modal-wide overrides ── */
     .ps-tryon-preview { height: 320px; }
+
+    /* ── Drawer list (history / profiles / settings) ── */
+    /* Pure vw gap (0.52vw = ~2 px on mobile) crushed list rows together. */
+    .ps-tryon-drawer-list { gap: 12px !important; padding: 0 !important; }
+    .ps-tryon-drawer { padding: 16px !important; }
+
+    /* ── Profile cards inside the sizing-profiles drawer ── */
+    .ps-msp-card {
+      padding: 16px !important;
+      border-radius: 14px !important;
+    }
+    .ps-msp-card-tag { font-size: 11px !important; padding: 4px 8px !important; border-radius: 999px !important; }
+    .ps-msp-card-circle { width: 72px !important; height: 72px !important; margin: 8px auto 12px !important; }
+    .ps-msp-card-name { font-size: 16px !important; margin-bottom: 6px !important; }
+    .ps-msp-meta-row { padding: 6px 0 !important; gap: 8px !important; }
+    .ps-msp-card-meta { font-size: 12px !important; }
+    .ps-msp-card-actions { gap: 8px !important; margin-top: 10px !important; }
+    .ps-msp-card-select { font-size: 13px !important; padding: 10px 12px !important; border-radius: 8px !important; }
+    .ps-msp-card-edit, .ps-msp-card-delete { width: 36px !important; height: 36px !important; border-radius: 8px !important; }
+    .ps-msp-card-create { min-height: 120px !important; font-size: 14px !important; }
+
+    /* ── Language switcher dropdown ── */
+    /* Default min(18vw, 280px) collapsed to ~67 px on mobile — unusable. */
+    .ps-tryon-lang-list { max-height: 320px !important; }
+    .ps-tryon-lang-item { padding: 10px 14px !important; gap: 10px !important; }
+    .ps-tryon-lang-name { font-size: 14px !important; }
+    .ps-tryon-lang-code { font-size: 11px !important; }
   }
 
   @keyframes ps-mobile-slide-up {
@@ -7854,30 +7887,22 @@ function MultiSectionMobile({
           children: t("Continue Shopping")
         }
       )
-    ] }) : sizingResult?.found === false ? (
-      // Backend couldn't find a size that fits — Try-On is meaningless
-      // without a recommendation, so surface a clear terminal action.
-      /* @__PURE__ */ jsx(
+    ] }) : (
+      // Try-On stays enabled even when the backend couldn't find a size —
+      // it's a visual preview, independent of the recommendation.
+      /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
           className: "ps-msr-tryon-cta",
-          onClick: onClose,
-          children: t("Continue Shopping")
+          onClick: onTryOn,
+          disabled: tryOnProcessing,
+          children: [
+            /* @__PURE__ */ jsx(CameraIcon, {}),
+            tryOnProcessing ? t("Processing...") : t("See how it looks on yourself")
+          ]
         }
       )
-    ) : /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: "ps-msr-tryon-cta",
-        onClick: onTryOn,
-        disabled: tryOnProcessing,
-        children: [
-          /* @__PURE__ */ jsx(CameraIcon, {}),
-          tryOnProcessing ? t("Processing...") : t("See how it looks on yourself")
-        ]
-      }
     ) }),
     sizeGuide ? null : null
   ] });
@@ -8389,8 +8414,7 @@ function SectionDetailView({
     const hasBadFit = details.some((d) => BAD_FIT.test(d.fit || ""));
     return hasBadFit ? t("Not Recommended") : t("Your Selection");
   }, [isRecommended, sectionResult, t]);
-  const noFitMessage = t("We couldn't find a size that fits for this product");
-  const displaySizeLabel = sectionFound === false ? noFitMessage : selectedCountry && isRecommended && internationalSizes && internationalSizes[selectedCountry] ? internationalSizes[selectedCountry] : displaySize;
+  const displaySizeLabel = selectedCountry && isRecommended && internationalSizes && internationalSizes[selectedCountry] ? internationalSizes[selectedCountry] : displaySize;
   const columnUnits = useMemo(() => {
     const units = [];
     for (let i = 0; i < section.headers.length; i++) {
@@ -8559,7 +8583,11 @@ function SectionDetailView({
   const showMatchPercent = !renderRaw;
   const secAny = sectionResult;
   const backendSize = secAny?.size || recSize;
-  const backendLength = secAny?.length || recLength;
+  const lengthFromDetails = (sectionResult?.matchDetails || []).find(
+    (m) => /inseam|length/i.test(m.measurement) && !/neck|arm|sleeve|back|shoulder/i.test(m.measurement)
+  );
+  const inseamFallback = lengthFromDetails ? (lengthFromDetails.chartRange || "").replace(/\s*(cm|in|inches)\s*/i, "").trim() : "";
+  const backendLength = secAny?.length || recLength || inseamFallback;
   const backendAvailableSizes = secAny?.availableSizes || [];
   const backendAvailableLengths = secAny?.availableLengths || [];
   const finalDisplayLength = selectedLength || backendLength;
@@ -8646,7 +8674,12 @@ function SectionDetailView({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-msd-card", children: [
+      sectionFound === false && /* @__PURE__ */ jsxs("div", { className: "ps-msd-card", style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: t("NO MATCHING SIZE") }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", fontWeight: 600, color: "var(--ps-text-primary)", margin: "10px 0 4px" }, children: t("We couldn't find a size that fits for this product.") }),
+        /* @__PURE__ */ jsx("p", { className: "ps-msd-card-note", children: t("Your measurements are outside this product's size range — the chart doesn't include a close match. You can still try it on visually below.") })
+      ] }),
+      sectionFound !== false && /* @__PURE__ */ jsxs("div", { className: "ps-msd-card", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-card-eyebrow", children: displaySize === backendSize ? t("RECOMMENDED SIZE") : t("TRYING SIZE") }),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", marginTop: "6px", marginBottom: "4px" }, children: [
           countryOptions.length > 1 && /* @__PURE__ */ jsxs(
@@ -8706,7 +8739,7 @@ function SectionDetailView({
         ] }),
         /* @__PURE__ */ jsx("p", { className: "ps-msd-card-note", children: t("Based on your measurements and the garment's tailoring chart.") })
       ] }),
-      fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-blueprint", children: [
+      sectionFound !== false && fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-blueprint", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-blueprint-title", children: t("MEASUREMENT BLUEPRINT") }),
         /* @__PURE__ */ jsx("div", { className: "ps-msd-blueprint-underline" }),
         /* @__PURE__ */ jsx("div", { className: "ps-msd-rows", children: fitRows.map((row, i) => {
@@ -8741,7 +8774,7 @@ function SectionDetailView({
           ] }, i);
         }) })
       ] }),
-      visibleSizes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
+      sectionFound !== false && visibleSizes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-sizes-label", children: t("TRY ANOTHER SIZE") }),
         /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: visibleSizes.map((s) => {
           const isActive = s === displaySize;
@@ -8757,7 +8790,7 @@ function SectionDetailView({
           );
         }) })
       ] }),
-      visibleLengths.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
+      sectionFound !== false && visibleLengths.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msd-sizes", children: [
         /* @__PURE__ */ jsx("span", { className: "ps-msd-sizes-label", children: t("LENGTH ADJUSTMENT") }),
         /* @__PURE__ */ jsx("div", { className: "ps-msd-sizes-pills", children: visibleLengths.map((s) => {
           const isActive = finalDisplayLength === s;
@@ -8773,7 +8806,7 @@ function SectionDetailView({
           );
         }) })
       ] }),
-      /* @__PURE__ */ jsxs("p", { className: "ps-msd-footer-note", children: [
+      sectionFound !== false && /* @__PURE__ */ jsxs("p", { className: "ps-msd-footer-note", children: [
         t("*Our sizing engine recommends"),
         " ",
         backendSize,
@@ -8784,7 +8817,19 @@ function SectionDetailView({
     ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sec-detail", style: { padding: "1.5vw", display: "flex", flexDirection: "column", height: "100%", background: "#F8F9FA" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", scrollbarWidth: "thin", scrollbarColor: "rgba(0,0,0,0.04) transparent" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", scrollbarWidth: "thin", scrollbarColor: "rgba(0,0,0,0.04) transparent" }, children: sectionFound === false ? /* @__PURE__ */ jsxs("div", { style: {
+      background: "white",
+      borderRadius: "0.7vw",
+      border: "1px solid rgba(0,0,0,0.06)",
+      padding: "1.4vw 1.6vw",
+      textAlign: "center",
+      marginTop: "0.4vw",
+      marginBottom: "1vw"
+    }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7vw", fontWeight: 700, color: "var(--ps-accent)", textTransform: "uppercase", letterSpacing: "0.12em" }, children: t("No matching size") }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "1vw", fontWeight: 600, color: "var(--ps-text-primary)", margin: "0.6vw 0 0.4vw" }, children: t("We couldn't find a size that fits for this product.") }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: "0.7vw", color: "var(--ps-text-secondary)", lineHeight: 1.55, margin: 0, maxWidth: "26vw", marginLeft: "auto", marginRight: "auto" }, children: t("Your measurements are outside this product's size range. You can still try it on visually below.") })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75vw", fontWeight: 700, color: "var(--ps-accent)", textTransform: "uppercase", letterSpacing: "0.12em" }, children: isRecommended ? t("Recommended Size") : altSizeLabel ?? t("Your Selection") }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5vw", marginTop: "0.35vw", marginBottom: "0.4vw" }, children: [
         countryOptions.length > 1 && /* @__PURE__ */ jsxs(
@@ -8919,7 +8964,7 @@ function SectionDetailView({
           );
         }) })
       ] })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: "0.6vw", borderTop: "1px solid rgba(0,0,0,0.06)", flexShrink: 0 }, children: [
       /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: onBack, type: "button", style: { fontSize: "0.7vw" }, children: [
         /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
@@ -9244,7 +9289,7 @@ function SizeResultView({
   const allDone = hasPhoto ? sizingDone && tryOnDone : sizingDone;
   const isMobile = useIsMobile();
   const isAccessory = measurementType === "face" || measurementType === "head";
-  const noFit = sizingResult?.found === false;
+  sizingResult?.found === false;
   const vtoExcluded = measurementType === "foot";
   console.log("[PS-SDK] SizeResultView render:", {
     hasPhoto,
@@ -9525,7 +9570,7 @@ function SizeResultView({
                     " →"
                   ]
                 }
-              ) : vtoExcluded || noFit ? /* @__PURE__ */ jsxs(
+              ) : vtoExcluded ? /* @__PURE__ */ jsxs(
                 "button",
                 {
                   className: "ps-tryon-v2-cta",
@@ -9586,7 +9631,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || vtoExcluded || noFit ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
                 productImage: resultImageUrl || productImage,
@@ -9634,7 +9679,7 @@ function SizeResultView({
                 onBack: resultImageUrl ? onClose || (() => setView("body-profile")) : () => setView("body-profile"),
                 backLabel: t("Back"),
                 internationalSizes: sizingResult?.internationalSizes,
-                onTryOn: resultImageUrl || vtoExcluded || noFit ? void 0 : handleSingleTryOn,
+                onTryOn: resultImageUrl || vtoExcluded ? void 0 : handleSingleTryOn,
                 continueLabel: resultImageUrl ? t("Continue Shopping") : void 0,
                 tryOnProcessing,
                 t,
@@ -14330,7 +14375,14 @@ function PrimeStyleTryonInner({
     }
   }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields, persistResultToProfile]);
   const handleQuickEstimate = useCallback(async (height, weight, heightUnit2, weightUnit2, gender, age, bodyType, chestProfile, midsectionProfile, hipProfile, bodyImage) => {
-    if (!apiRef.current) return;
+    if (!apiRef.current) {
+      const msg = t("SDK not configured. Please refresh and try again.");
+      console.warn("[ps-sdk] handleQuickEstimate BAILED — apiRef is null. API key not loaded.");
+      setErrorMessage(msg);
+      setView("error");
+      onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
+      return;
+    }
     getApiUrl(apiUrl);
     getApiKey();
     const SKIP_ESTIMATE_KEYS = /* @__PURE__ */ new Set(["weight", "weightKg", "height", "heightCm"]);
@@ -14387,7 +14439,11 @@ function PrimeStyleTryonInner({
       apiUrl
     });
     if (!apiRef.current || !sseRef.current) {
+      const msg = t("SDK not configured. Please refresh and try again.");
       console.warn("[ps-sdk] handleSnapSubmit BAILED — apiRef or sseRef is null. Check api init.");
+      setErrorMessage(msg);
+      setView("error");
+      onError?.({ message: msg, code: "SDK_NOT_CONFIGURED" });
       return;
     }
     const baseUrl = getApiUrl(apiUrl);