@primestyleai/tryon 5.10.136 → 5.10.138

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

@@ -19,8 +19,10 @@ interface MobileScanningViewProps {
     productDescription?: string;
     /** Optional cancel handler shown as a text link under the cards. */
     onCancelTryOn?: () => void;
-    onSwitchToManual: () => void;
+    /** No longer rendered (tabs removed mid-scan), kept for backwards-compat
+     *  with the photo-step caller that passes it down. */
+    onSwitchToManual?: () => void;
     t: TranslateFn;
 }
-export declare function MobileScanningView({ previewUrl, productImage, bodyLandmarks, sizingDone, tryOnProcessing, productMaterial, productDescription, onCancelTryOn, onSwitchToManual, t, }: MobileScanningViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileScanningView({ previewUrl, productImage, bodyLandmarks, sizingDone, tryOnProcessing, productMaterial, productDescription, onCancelTryOn, t, }: MobileScanningViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/storefront/primestyle-tryon.js

@@ -13571,6 +13571,75 @@ const STYLES$1 = `
   }
   .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }
 
+  /* ──────────────────────────────────────────────────────────────────
+     Mobile sizing for the My Profiles / History drawer. Desktop uses vw
+     units which collapse to 1–4 px on a 375 px phone. Override every
+     rule with px-based values so the list is actually readable.
+     ────────────────────────────────────────────────────────────────── */
+  @media (max-width: 768px) {
+    .ps-tryon-drawer { padding: 16px 14px; }
+    .ps-tryon-drawer-header { gap: 10px; padding-bottom: 12px; margin-bottom: 12px; }
+    .ps-tryon-drawer-back {
+      width: 36px; height: 36px; border-radius: 8px;
+    }
+    .ps-tryon-drawer-back svg { width: 18px; height: 18px; }
+    .ps-tryon-drawer-title { font-size: 17px; font-weight: 600; }
+    .ps-tryon-drawer-add-btn {
+      width: 32px; height: 32px; border-radius: 8px; font-size: 20px;
+    }
+    .ps-tryon-drawer-list { gap: 10px; }
+    .ps-tryon-drawer-empty { padding: 32px 16px; font-size: 14px; }
+
+    .ps-tryon-drawer-create {
+      padding: 14px;
+      border-radius: 10px;
+      font-size: 14px;
+      gap: 6px;
+      margin-bottom: 4px;
+    }
+    .ps-tryon-drawer-clear {
+      font-size: 13px; padding: 12px 0; margin-top: 6px;
+    }
+
+    .ps-tryon-profile-item {
+      gap: 12px; padding: 14px; border-radius: 12px;
+    }
+    .ps-tryon-profile-avatar {
+      width: 44px; height: 44px;
+    }
+    .ps-tryon-profile-avatar svg { width: 22px; height: 22px; }
+    .ps-tryon-profile-name { font-size: 15px; }
+    .ps-tryon-profile-detail { font-size: 12px; margin-top: 3px; }
+    .ps-tryon-profile-item > svg:last-child { width: 18px; height: 18px; }
+
+    .ps-tryon-history-item {
+      gap: 12px; padding: 12px; border-radius: 12px;
+    }
+    .ps-tryon-history-images { gap: 6px; }
+    .ps-tryon-history-thumb,
+    .ps-tryon-history-result-img {
+      width: 64px; height: 80px; border-radius: 8px;
+    }
+    .ps-tryon-history-product { font-size: 14px; line-height: 1.3; }
+    .ps-tryon-history-meta { font-size: 11px; margin-top: 4px; }
+    .ps-tryon-history-sizing { gap: 8px; margin-top: 6px; }
+    .ps-tryon-history-sizing-reason { font-size: 11px; }
+    .ps-tryon-history-size-badge {
+      min-width: 32px; height: 32px; padding: 0 10px; font-size: 12px;
+    }
+    .ps-tryon-history-sections { gap: 6px; margin-top: 6px; }
+    .ps-tryon-history-section-chip {
+      font-size: 11px; padding: 3px 8px; border-radius: 6px;
+    }
+    .ps-tryon-history-tryon-badge {
+      font-size: 10px; padding: 2px 7px; border-radius: 5px; margin-top: 6px;
+    }
+    .ps-tryon-history-delete {
+      width: 32px; height: 32px; border-radius: 6px;
+    }
+    .ps-tryon-history-delete svg { width: 16px; height: 16px; }
+  }
+
   /* Profile detail modal — portaled to body, sits ABOVE the main modal
      overlay (which has z-index 2147483647). Equal z-index + later DOM
      order means this stacks on top. Same trick as the language dropdown. */
@@ -17553,10 +17622,16 @@ const STYLES$1 = `
     letter-spacing: 0.05em;
     color: var(--ps-text-muted);
   }
-  /* Mobile: 56 px overflows for compound labels like
-     "MISSY 12 / Standard / Length 61". Cap at 36 px. */
+  /* Mobile: long labels like "MISSY 12 / Standard" wrap to a second line
+     at 36 px in a ~280 px card. Drop further to 28 px and let the size
+     pill take the full card width so wrapping doesn't strand the meta
+     value awkwardly to the side. */
   @media (max-width: 768px) {
-    .ps-msd-card-size { font-size: 36px; letter-spacing: -0.015em; }
+    .ps-msd-card-size {
+      font-size: 28px;
+      letter-spacing: -0.015em;
+      line-height: 1.1;
+    }
     .ps-msd-card-size-meta { font-size: 11px; }
   }
   .ps-msd-card-divider {
@@ -19068,46 +19143,6 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
-function RulerIcon() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
-  ] });
-}
-function ScanIcon() {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3" })
-  ] });
-}
-function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t: t2 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
-        onClick: onSwitchToManual,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(RulerIcon, {}),
-          t2("MANUAL FIT")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
-        onClick: onSwitchToScan,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ScanIcon, {}),
-          t2("AI SCAN")
-        ]
-      }
-    )
-  ] });
-}
 const SKELETON_CONNECTIONS$1 = [
   // Head → torso. Bridges the gap between the nose dot and the shoulder
   // line — without these the head reads as floating above the body.
@@ -19196,7 +19231,8 @@ function MobileScanningView({
   productMaterial,
   productDescription,
   onCancelTryOn,
-  onSwitchToManual,
+  // onSwitchToManual is intentionally not destructured — bottom tabs are
+  // hidden during analysis and the prop is kept on the type for callers.
   t: t2
 }) {
   const displayImage = previewUrl || productImage || "";
@@ -19255,17 +19291,7 @@ function MobileScanningView({
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-title", children: current.title }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
     ] }, stageIdx) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      MobileBottomTabs,
-      {
-        mode: "scan",
-        onSwitchToManual,
-        onSwitchToScan: () => {
-        },
-        t: t2
-      }
-    ) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" })
   ] });
 }
 const TARGET_SECONDS = 22;
@@ -20516,14 +20542,14 @@ function SectionDetailView({
         " ",
         t2("based on your measurements and the garment's tailoring chart.")
       ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: 10, padding: "12px 0 4px", flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: 10, padding: "12px 0 4px", flexShrink: 0, alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
             type: "button",
             className: "ps-bp-back-btn",
             onClick: onBack,
-            style: { fontSize: 13, padding: "10px 6px" },
+            style: { fontSize: 13, padding: "10px 6px", flexShrink: 0 },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
               " ",
@@ -20531,7 +20557,6 @@ function SectionDetailView({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: 1 } }),
         onTryOn ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -20539,7 +20564,8 @@ function SectionDetailView({
             onClick: onTryOn,
             disabled: tryOnProcessing,
             style: {
-              flex: 1,
+              flex: "1 1 0",
+              minWidth: 0,
               padding: "12px 16px",
               borderRadius: 10,
               background: "var(--ps-accent)",
@@ -20553,7 +20579,8 @@ function SectionDetailView({
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              gap: 6
+              gap: 6,
+              whiteSpace: "nowrap"
             },
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, { size: 14 }),
@@ -20566,7 +20593,8 @@ function SectionDetailView({
             type: "button",
             onClick: onBack,
             style: {
-              flex: 1,
+              flex: "1 1 0",
+              minWidth: 0,
               padding: "12px 16px",
               borderRadius: 10,
               background: "var(--ps-accent)",
@@ -20579,7 +20607,8 @@ function SectionDetailView({
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              gap: 6
+              gap: 6,
+              whiteSpace: "nowrap"
             },
             children: [
               continueLabel || t2("Continue"),
@@ -24788,6 +24817,46 @@ function ResultView({ setView }) {
   }, []);
   return null;
 }
+function RulerIcon() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
+  ] });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t: t2 }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
+        onClick: onSwitchToManual,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(RulerIcon, {}),
+          t2("MANUAL FIT")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
+        onClick: onSwitchToScan,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ScanIcon, {}),
+          t2("AI SCAN")
+        ]
+      }
+    )
+  ] });
+}
 function CameraSmallIcon({ size = 16 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),

package/package.json

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