@primestyleai/tryon 5.10.88 → 5.10.89

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

@@ -4,8 +4,13 @@ import type { TranslateFn } from "../../i18n";
  * product (no merchant CSV uploaded, no inline size guide). The user
  * still gets a polite path forward — skip sizing entirely and try the
  * product on visually.
+ *
+ * Desktop layout: split — product image left, message + CTAs right.
+ * Mobile layout: stacked — image on top, text + CTAs below.
  */
-export declare function NoChartView({ onTryOn, onClose, t, }: {
+export declare function NoChartView({ productImage, productTitle, onTryOn, onClose, t, }: {
+    productImage?: string;
+    productTitle?: string;
     onTryOn: () => void;
     onClose: () => void;
     t: TranslateFn;

package/dist/storefront/primestyle-tryon.js

@@ -12880,46 +12880,71 @@ const STYLES$1 = `
   /* ──────────────────────────────────────────────
      NoChartView — empty state when the merchant
      hasn't uploaded a size chart for this product.
+     Desktop: split (image left, panel right).
+     Mobile: stacked (image top, panel bottom).
      ────────────────────────────────────────────── */
   .ps-tryon-no-chart {
+    display: flex; align-items: stretch;
+    gap: 1.2vw;
+    padding: 1.5vw;
+    width: 100%;
+    min-height: 28vw;
+  }
+  .ps-tryon-no-chart-image {
+    flex: 1 1 50%;
+    min-width: 0;
+    border-radius: 0.5vw;
+    overflow: hidden;
+    background: var(--ps-bg-tertiary, #f3f4f6);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-tryon-no-chart-image-img {
+    width: 100%; height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+  .ps-tryon-no-chart-panel {
+    flex: 1 1 50%;
     display: flex; flex-direction: column;
-    align-items: center; justify-content: center;
-    text-align: center;
-    padding: 32px 24px;
-    max-width: 460px; margin: 0 auto;
-    min-height: 60vh;
-    gap: 16px;
+    align-items: flex-start; justify-content: center;
+    gap: 0.8vw;
+    padding: 0.6vw 1vw;
+    min-width: 0;
   }
   .ps-tryon-no-chart-icon {
-    width: 72px; height: 72px;
+    width: 3.2vw; height: 3.2vw;
+    min-width: 48px; min-height: 48px;
     display: flex; align-items: center; justify-content: center;
     border-radius: 50%;
     background: var(--ps-bg-tertiary, #f3f4f6);
     color: var(--ps-text-secondary);
   }
+  .ps-tryon-no-chart-icon svg {
+    width: 60%; height: 60%;
+  }
   .ps-tryon-no-chart-title {
-    font-size: 18px; font-weight: 700;
+    font-size: 1.1vw; font-weight: 700;
     color: var(--ps-text-primary);
-    margin: 4px 0 0;
+    margin: 0;
+    line-height: 1.25;
   }
   .ps-tryon-no-chart-msg {
-    font-size: 13px; line-height: 1.55;
+    font-size: 0.72vw; line-height: 1.55;
     color: var(--ps-text-secondary);
     margin: 0;
-    max-width: 380px;
   }
   .ps-tryon-no-chart-actions {
     display: flex; flex-direction: column;
-    align-items: stretch; gap: 10px;
-    width: 100%; max-width: 320px;
-    margin-top: 8px;
+    align-items: stretch; gap: 0.5vw;
+    width: 100%; max-width: 22vw;
+    margin-top: 0.4vw;
   }
   .ps-tryon-no-chart-cta {
     background: var(--ps-accent); color: #FFFFFF;
-    border: none; border-radius: 10px;
-    padding: 14px 18px;
+    border: none; border-radius: 0.5vw;
+    padding: 0.8vw 1vw;
     font-family: inherit;
-    font-size: 13px; font-weight: 700;
+    font-size: 0.78vw; font-weight: 700;
     letter-spacing: 0.04em;
     cursor: pointer;
     transition: opacity 0.15s, transform 0.15s;
@@ -12928,10 +12953,10 @@ const STYLES$1 = `
   .ps-tryon-no-chart-secondary {
     background: transparent; color: var(--ps-text-secondary);
     border: 1px solid var(--ps-border-color);
-    border-radius: 10px;
-    padding: 12px 18px;
+    border-radius: 0.5vw;
+    padding: 0.7vw 1vw;
     font-family: inherit;
-    font-size: 12px; font-weight: 600;
+    font-size: 0.7vw; font-weight: 600;
     cursor: pointer;
     transition: background 0.15s;
   }
@@ -13183,6 +13208,37 @@ const STYLES$1 = `
      px-based sizing (vw becomes sub-pixel and unreadable on phones)
      ════════════════════════════════════════════════════════════════ */
   @media (max-width: 768px) {
+    /* NoChartView mobile — stack image on top, panel below. */
+    .ps-tryon-no-chart {
+      flex-direction: column !important;
+      gap: 16px !important;
+      padding: 16px !important;
+      min-height: 0 !important;
+    }
+    .ps-tryon-no-chart-image {
+      flex: 0 0 auto !important;
+      width: 100% !important;
+      max-height: 38vh !important;
+      border-radius: 12px !important;
+    }
+    .ps-tryon-no-chart-image-img {
+      max-height: 38vh !important; width: auto !important; max-width: 100% !important;
+    }
+    .ps-tryon-no-chart-panel {
+      flex: 1 1 auto !important;
+      align-items: center !important; justify-content: flex-start !important;
+      text-align: center !important;
+      gap: 12px !important;
+      padding: 4px 8px !important;
+    }
+    .ps-tryon-no-chart-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; }
+    .ps-tryon-no-chart-icon svg { width: 28px !important; height: 28px !important; }
+    .ps-tryon-no-chart-title { font-size: 18px !important; text-align: center !important; }
+    .ps-tryon-no-chart-msg { font-size: 13px !important; text-align: center !important; max-width: 360px !important; margin: 0 auto !important; }
+    .ps-tryon-no-chart-actions { max-width: 320px !important; gap: 10px !important; margin-top: 4px !important; }
+    .ps-tryon-no-chart-cta { padding: 14px 18px !important; font-size: 13px !important; border-radius: 10px !important; }
+    .ps-tryon-no-chart-secondary { padding: 12px 18px !important; font-size: 12px !important; border-radius: 10px !important; }
+
     /* ── Trigger button: minimum 44px touch target, readable text ── */
     .ps-tryon-btn {
       padding: max(12px, 3vw) max(20px, 5vw); font-size: max(14px, 3.6vw); gap: max(8px, 2vw);
@@ -21748,23 +21804,28 @@ function ErrorView({
   ] });
 }
 function NoChartView({
+  productImage,
+  productTitle,
   onTryOn,
   onClose,
   t: t2
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-no-chart", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-no-chart-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: "44", height: "44", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 17l6 6 12-12-6-6L3 17z" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 4l-3 3M16 6l-2 2M18 8l-2 2M11 7l-2 2M13 9l-2 2M15 11l-2 2" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "ps-tryon-no-chart-title", children: t2("No size chart available") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-tryon-no-chart-msg", children: t2("The merchant hasn't uploaded sizing data for this product yet. You can still see how it looks on you with a virtual try-on.") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-no-chart-actions", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "ps-tryon-no-chart-cta", onClick: onTryOn, children: [
-        t2("See how it looks on you"),
-        " →"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-tryon-no-chart-secondary", onClick: onClose, children: t2("Continue Shopping") })
+    productImage && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-no-chart-image", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: productImage, alt: productTitle || "", className: "ps-tryon-no-chart-image-img" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-no-chart-panel", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-no-chart-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", width: "44", height: "44", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 17l6 6 12-12-6-6L3 17z" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14 4l-3 3M16 6l-2 2M18 8l-2 2M11 7l-2 2M13 9l-2 2M15 11l-2 2" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "ps-tryon-no-chart-title", children: t2("No size chart available") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-tryon-no-chart-msg", children: t2("The merchant hasn't uploaded sizing data for this product yet. You can still see how it looks on you with a virtual try-on.") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-no-chart-actions", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: "ps-tryon-no-chart-cta", onClick: onTryOn, children: [
+          t2("See how it looks on you"),
+          " →"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-tryon-no-chart-secondary", onClick: onClose, children: t2("Continue Shopping") })
+      ] })
     ] })
   ] });
 }
@@ -28844,6 +28905,8 @@ function PrimeStyleTryonInner({
         return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           NoChartView,
           {
+            productImage,
+            productTitle,
             onTryOn: () => setView("upload"),
             onClose: onClose ?? (() => {
             }),

package/package.json

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