@primestyleai/tryon 3.2.2 → 3.4.0

package/dist/react/index.js

@@ -589,8 +589,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,
@@ -806,7 +806,8 @@ function PrimeStyleTryonInner({
     const sgChecked = !sizeGuideFetching && sizeGuide !== null;
     if (sizeGuideFetching) {
       return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sizing-choice", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-checking", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-spinner" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 32 }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-bar-wrap", children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-checking-bar" }) }),
         /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: "Checking size guide..." }),
         /* @__PURE__ */ jsx("p", { className: "ps-tryon-sg-checking-sub", children: "Looking for size chart data for this product" })
       ] }) });
@@ -856,8 +857,14 @@ 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: [
-      profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-profile-select", value: activeProfileId || "", onChange: (e) => {
+      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-back", onClick: () => setView("sizing-choice"), children: [
+        /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+        " Back"
+      ] }),
+      sizingMethod === "exact" && profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-profile-select", value: activeProfileId || "", onChange: (e) => {
         if (e.target.value) applyProfile(e.target.value);
       }, children: [
         /* @__PURE__ */ jsx("option", { value: "", children: "Auto-fill from saved profile..." }),
@@ -943,7 +950,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, {})
       ] })
@@ -1013,7 +1041,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" })
           ] })
@@ -1053,16 +1088,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));
@@ -1208,6 +1248,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 */
@@ -1357,17 +1398,21 @@ const STYLES = `
     display: flex; align-items: center; justify-content: center; gap: 6px;
   }
   .ps-tryon-sg-found svg { stroke: #4ade80; }
-  .ps-tryon-sg-checking {
-    display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center;
-  }
-  .ps-tryon-sg-checking-spinner {
-    width: 40px; height: 40px; border: 3px solid #333;
-    border-top-color: #bb945c; border-radius: 50%;
-    animation: ps-spin 0.8s linear infinite; margin-bottom: 20px;
-  }
+  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center; }
+  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: 16px; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
+  .ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }
+  @keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
+  .ps-tryon-sg-checking-bar-wrap { width: 180px; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 20px; }
+  .ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, #bb945c, #d6ba7d); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }
+  @keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
   .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 6px; }
   .ps-tryon-sg-checking-sub { font-size: 13px; color: #999; margin: 0; }
 
+  /* Back button */
+  .ps-tryon-back { display: flex; align-items: center; gap: 6px; background: none; border: none; color: #999; font-size: 13px; cursor: pointer; padding: 0; margin-bottom: 12px; font-family: inherit; transition: color 0.2s; }
+  .ps-tryon-back:hover { color: #fff; }
+  .ps-tryon-back svg { stroke: currentColor; fill: none; }
+
   /* Sizing form */
   .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }
   .ps-tryon-input-row { display: flex; align-items: center; gap: 10px; }
@@ -1403,6 +1448,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; }
@@ -1510,6 +1568,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; }
 
@@ -1538,7 +1599,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 */
@@ -1561,22 +1622,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,57 +1,57 @@
-{
-  "name": "@primestyleai/tryon",
-  "version": "3.2.2",
-  "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
-  "type": "module",
-  "main": "dist/primestyle-tryon.js",
-  "module": "dist/primestyle-tryon.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/primestyle-tryon.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./react": {
-      "import": "./dist/react/index.js",
-      "types": "./dist/react/index.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "logo.svg",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build && tsc --emitDeclarationOnly",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "virtual-try-on",
-    "react",
-    "web-component",
-    "fashion",
-    "ai",
-    "primestyle"
-  ],
-  "author": "PrimeStyle AI",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/react": "^18.3.28",
-    "terser": "^5.31.0",
-    "typescript": "^5.5.0",
-    "vite": "^5.4.0"
-  }
-}
+{
+  "name": "@primestyleai/tryon",
+  "version": "3.4.0",
+  "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
+  "type": "module",
+  "main": "dist/primestyle-tryon.js",
+  "module": "dist/primestyle-tryon.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/primestyle-tryon.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "types": "./dist/react/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "logo.svg",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "virtual-try-on",
+    "react",
+    "web-component",
+    "fashion",
+    "ai",
+    "primestyle"
+  ],
+  "author": "PrimeStyle AI",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.28",
+    "terser": "^5.31.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0"
+  }
+}