@primestyleai/tryon 5.10.0 → 5.10.1

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 {
@@ -14330,7 +14363,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 +14427,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);