@primestyleai/tryon 3.3.0 → 3.4.1

package/dist/react/index.js

@@ -246,6 +246,8 @@ function PrimeStyleTryonInner({
   useEffect(() => {
     if (view === "processing") {
       progressRef.current = 0;
+      if (progressBarRef.current) progressBarRef.current.style.width = "0%";
+      if (progressTextRef.current) progressTextRef.current.textContent = "0%";
       const statuses = [
         { at: 0, text: "Preparing your image..." },
         { at: 15, text: "Analyzing body proportions..." },
@@ -256,6 +258,7 @@ function PrimeStyleTryonInner({
       ];
       const interval = setInterval(() => {
         const p = progressRef.current;
+        if (p >= 100) return;
         const increment = p < 30 ? 1.2 : p < 60 ? 0.8 : p < 80 ? 0.4 : p < 95 ? 0.15 : 0;
         progressRef.current = Math.min(p + increment, 95);
         const val = Math.round(progressRef.current);
@@ -589,8 +592,8 @@ function PrimeStyleTryonInner({
     if (p.weightUnit) setWeightUnit(p.weightUnit);
     setFormKey((k) => k + 1);
   }, [profiles]);
-  const saveProfile = useCallback((name) => {
-    const id = activeProfileId || `p_${Date.now()}`;
+  const saveProfile = useCallback((name, asNew) => {
+    const id = (asNew ? null : activeProfileId) || `p_${Date.now()}`;
     const p = {
       id,
       name,
@@ -857,6 +860,8 @@ function PrimeStyleTryonInner({
   function SizingFormView() {
     const isFemale = formGender === "female";
     const isCm = sizingUnit === "cm";
+    const [saveToggle, setSaveToggle] = useState(false);
+    const [saveFormName, setSaveFormName] = useState("");
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form", children: [
       /* @__PURE__ */ jsxs("button", { className: "ps-tryon-back", onClick: () => setView("sizing-choice"), children: [
         /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
@@ -948,7 +953,28 @@ function PrimeStyleTryonInner({
         ] })
       ] }),
       /* @__PURE__ */ jsx("p", { className: "ps-tryon-disclaimer", children: "Fill in what you know — more measurements = better accuracy." }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: handleSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-form-save-toggle", children: [
+        /* @__PURE__ */ jsxs("label", { className: "ps-tryon-form-save-check", children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", checked: saveToggle, onChange: (e) => setSaveToggle(e.target.checked) }),
+          /* @__PURE__ */ jsx("span", { children: "Save as profile" })
+        ] }),
+        saveToggle && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            className: "ps-tryon-form-save-name",
+            placeholder: "Profile name (e.g. John, Sarah)",
+            value: saveFormName,
+            onChange: (e) => setSaveFormName(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: () => {
+        if (saveToggle && saveFormName.trim()) {
+          saveProfile(saveFormName.trim());
+        }
+        handleSubmit();
+      }, children: [
         "Get My Size & Try On ",
         /* @__PURE__ */ jsx(ArrowRightIcon, {})
       ] })
@@ -962,7 +988,7 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: progressBarRef, className: "ps-tryon-progress-bar-fill", style: { width: "0%" } }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: progressBarRef, className: "ps-tryon-progress-bar-fill" }) }),
         /* @__PURE__ */ jsx("span", { ref: progressTextRef, className: "ps-tryon-progress-pct", children: "0%" })
       ] }),
       /* @__PURE__ */ jsx("div", { ref: progressStatusRef, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
@@ -1018,7 +1044,14 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-save-label", children: "Save your measurements for next time" }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-row", children: [
             /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Name this profile (e.g. John, Sarah)", value: profileName, onChange: (e) => setProfileName(e.target.value) }),
-            /* @__PURE__ */ jsx("button", { onClick: () => {
+            activeProfileId ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-btn-group", children: [
+              /* @__PURE__ */ jsx("button", { onClick: () => {
+                if (profileName.trim()) saveProfile(profileName.trim());
+              }, children: "Update" }),
+              /* @__PURE__ */ jsx("button", { className: "ps-tryon-save-new-btn", onClick: () => {
+                if (profileName.trim()) saveProfile(profileName.trim(), true);
+              }, children: "+ New" })
+            ] }) : /* @__PURE__ */ jsx("button", { onClick: () => {
               if (profileName.trim()) saveProfile(profileName.trim());
             }, children: "Save" })
           ] })
@@ -1058,16 +1091,21 @@ function PrimeStyleTryonInner({
         ] }),
         /* @__PURE__ */ jsx(ChevronRightIcon, {})
       ] }, p.id)) : history.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-drawer-empty", children: "No history yet." }) : history.map((entry, idx) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-item", children: [
-        entry.productImage && /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: "", className: "ps-tryon-history-thumb" }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-images", children: [
+          entry.productImage && /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: "", className: "ps-tryon-history-thumb" }),
+          entry.resultImageUrl && /* @__PURE__ */ jsx("img", { src: entry.resultImageUrl, alt: "", className: "ps-tryon-history-result-img" })
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-info", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-history-product", children: entry.productTitle || "Product" }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-meta", children: [
             entry.profileName ? `${entry.profileName} · ` : "",
             new Date(entry.date).toLocaleDateString()
           ] }),
-          entry.recommendedSize && /* @__PURE__ */ jsx("div", { className: "ps-tryon-history-sizing", children: /* @__PURE__ */ jsx("span", { className: "ps-tryon-history-size-badge", children: entry.recommendedSize }) })
+          entry.recommendedSize && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-history-sizing", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-history-size-badge", children: entry.recommendedSize }),
+            entry.reasoning && /* @__PURE__ */ jsx("span", { className: "ps-tryon-history-sizing-reason", children: entry.reasoning })
+          ] })
         ] }),
-        entry.resultImageUrl && /* @__PURE__ */ jsx("img", { src: entry.resultImageUrl, alt: "", className: "ps-tryon-history-result-img" }),
         /* @__PURE__ */ jsx("button", { className: "ps-tryon-history-delete", onClick: (e) => {
           e.stopPropagation();
           setHistory((prev) => prev.filter((_, i) => i !== idx));
@@ -1213,6 +1251,7 @@ const STYLES = `
     scrollbar-width: thin; scrollbar-color: #333 transparent;
   }
   .ps-tryon-modal-wide { max-width: 920px; }
+  .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
   @keyframes ps-slide-up { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
 
   /* Header */
@@ -1412,6 +1451,19 @@ const STYLES = `
   .ps-tryon-shoe-section { border-top: 1px solid #333; padding-top: 14px; margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
   .ps-tryon-shoe-title { font-size: 13px; font-weight: 600; color: #999; }
   .ps-tryon-disclaimer { font-size: 11px; color: #666; margin: 4px 0 0; }
+  .ps-tryon-form-save-toggle { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
+  .ps-tryon-form-save-check {
+    display: flex; align-items: center; gap: 8px; font-size: 13px; color: #ccc; cursor: pointer; user-select: none;
+  }
+  .ps-tryon-form-save-check input[type="checkbox"] {
+    width: 16px; height: 16px; accent-color: #bb945c; cursor: pointer;
+  }
+  .ps-tryon-form-save-name {
+    padding: 8px 12px; border: 1.5px solid #333; border-radius: 10px;
+    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+    transition: border-color 0.2s;
+  }
+  .ps-tryon-form-save-name:focus { border-color: #bb945c; }
 
   /* Processing */
   .ps-tryon-processing { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; }
@@ -1450,7 +1502,7 @@ const STYLES = `
   }
   .ps-tryon-progress-bar-fill {
     height: 100%; background: linear-gradient(90deg, #bb945c, #d6ba7d);
-    border-radius: 3px; transition: width 0.3s ease;
+    border-radius: 3px; transition: width 0.3s ease; width: 0%;
   }
   .ps-tryon-progress-pct {
     font-size: 13px; font-weight: 700; color: #bb945c; min-width: 36px; text-align: right;
@@ -1519,6 +1571,9 @@ const STYLES = `
     font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
   }
   .ps-tryon-save-row button:hover { opacity: 0.9; }
+  .ps-tryon-save-btn-group { display: flex; gap: 6px; }
+  .ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid #bb945c !important; color: #bb945c !important; }
+  .ps-tryon-save-new-btn:hover { background: rgba(187,148,92,0.1) !important; }
   .ps-tryon-save-done { font-size: 12px; color: #4ade80; margin-top: 10px; display: flex; align-items: center; gap: 6px; justify-content: center; }
   .ps-tryon-save-done svg { stroke: currentColor; }
 
@@ -1547,7 +1602,7 @@ const STYLES = `
   }
   .ps-tryon-drawer-back:hover { border-color: #bb945c; color: #bb945c; }
   .ps-tryon-drawer-title { font-size: 16px; font-weight: 600; color: #fff; }
-  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 8px; }
+  .ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 10px; }
   .ps-tryon-drawer-empty { text-align: center; padding: 32px 16px; color: #666; font-size: 14px; }
 
   /* Profile items */
@@ -1570,22 +1625,24 @@ const STYLES = `
 
   /* History items */
   .ps-tryon-history-item {
-    display: flex; gap: 10px; padding: 12px;
-    border: 1px solid #333; border-radius: 12px; align-items: center; transition: all 0.2s;
+    display: flex; gap: 14px; padding: 14px;
+    border: 1px solid #333; border-radius: 12px; align-items: flex-start; transition: all 0.2s;
   }
-  .ps-tryon-history-item:hover { border-color: #bb945c; }
-  .ps-tryon-history-thumb { width: 48px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
+  .ps-tryon-history-item:hover { border-color: #bb945c; box-shadow: 0 4px 12px rgba(187,148,92,0.06); }
+  .ps-tryon-history-images { display: flex; gap: 8px; flex-shrink: 0; }
+  .ps-tryon-history-thumb { width: 64px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
   .ps-tryon-history-info { flex: 1; min-width: 0; }
-  .ps-tryon-history-product { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .ps-tryon-history-product { font-size: 13px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
   .ps-tryon-history-meta { font-size: 11px; color: #666; margin-top: 3px; }
-  .ps-tryon-history-sizing { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
+  .ps-tryon-history-sizing { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
+  .ps-tryon-history-sizing-reason { font-size: 11px; color: #999; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
   .ps-tryon-history-size-badge {
-    width: 28px; height: 28px; border-radius: 50%;
+    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     background: linear-gradient(135deg, #bb945c, #d6ba7d);
-    color: #111; font-size: 11px; font-weight: 700; flex-shrink: 0;
+    color: #111; font-size: 13px; font-weight: 700;
   }
-  .ps-tryon-history-result-img { width: 48px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1.5px solid #bb945c; }
+  .ps-tryon-history-result-img { width: 64px; height: 80px; border-radius: 10px; object-fit: cover; flex-shrink: 0; border: 2px solid #bb945c; }
   .ps-tryon-history-delete {
     width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
     border: none; background: transparent; cursor: pointer; color: #666; border-radius: 6px; transition: all 0.2s; flex-shrink: 0;

package/package.json

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