@primestyleai/tryon 3.1.1 → 3.2.1

package/dist/react/index.js

@@ -434,8 +434,6 @@ function PrimeStyleTryonInner({
     if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
     if (sizingMethod === "exact") {
       const m = { gender: formRef.current.gender || "male" };
-      if (formRef.current.height) m.heightCm = heightUnit === "ft" ? ftInToCm(parseFloat(formRef.current.heightFeet || "0"), parseFloat(formRef.current.heightInches || "0")) : parseFloat(formRef.current.height);
-      if (formRef.current.weight) m.weightKg = weightUnit === "lbs" ? lbsToKg(parseFloat(formRef.current.weight)) : parseFloat(formRef.current.weight);
       const keys = ["chest", "bust", "waist", "hips", "shoulderWidth", "sleeveLength", "inseam", "neckCircumference", "footLengthCm"];
       for (const k of keys) {
         if (formRef.current[k]) m[k] = sizingUnit === "in" ? inToCm(parseFloat(formRef.current[k])) : parseFloat(formRef.current[k]);
@@ -446,9 +444,16 @@ function PrimeStyleTryonInner({
       if (formRef.current.fitPreference) m.fitPreference = formRef.current.fitPreference;
       payload.measurements = m;
     } else {
+      const qHeight = heightUnit === "ft" ? ftInToCm(parseFloat(formRef.current.heightFeet || "0"), parseFloat(formRef.current.heightInches || "0")) : parseFloat(formRef.current.height || "0");
+      const qWeight = weightUnit === "lbs" ? lbsToKg(parseFloat(formRef.current.weight || "0")) : parseFloat(formRef.current.weight || "0");
+      if (!qHeight || qHeight < 100 || !qWeight || qWeight < 30) {
+        console.warn("[PrimeStyle] Skipping sizing — invalid height/weight:", { qHeight, qWeight });
+        setSizingLoading(false);
+        return;
+      }
       payload.quickEstimate = {
-        heightCm: heightUnit === "ft" ? ftInToCm(parseFloat(formRef.current.heightFeet || "0"), parseFloat(formRef.current.heightInches || "0")) : parseFloat(formRef.current.height || "0"),
-        weightKg: weightUnit === "lbs" ? lbsToKg(parseFloat(formRef.current.weight || "0")) : parseFloat(formRef.current.weight || "0"),
+        heightCm: qHeight,
+        weightKg: qWeight,
         gender: formRef.current.gender || "male"
       };
     }
@@ -744,75 +749,71 @@ function PrimeStyleTryonInner({
     ] });
   }
   function UploadView() {
-    return /* @__PURE__ */ jsxs(Fragment, { 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) => {
-        if (e.target.value) applyProfile(e.target.value);
-      }, children: [
-        /* @__PURE__ */ jsx("option", { value: "", children: "Auto-fill from saved profile..." }),
-        profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
-          p.name,
-          " (",
-          p.gender === "female" ? "Women's" : "Men's",
-          ")"
-        ] }, p.id))
-      ] }) }),
-      selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
-          /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
-          /* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { onClick: () => setView("sizing-choice"), className: cx("ps-tryon-submit", cn.submitButton), children: [
-          "Continue to Sizing ",
-          /* @__PURE__ */ jsx(ArrowRightIcon, {})
-        ] })
-      ] }) : /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cx(`ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`, cn.uploadZone),
-          onClick: () => fileInputRef.current?.click(),
-          onDragOver: (e) => {
-            e.preventDefault();
-            setDragOver(true);
-          },
-          onDragLeave: () => setDragOver(false),
-          onDrop: (e) => {
-            e.preventDefault();
-            setDragOver(false);
-            const f = e.dataTransfer?.files?.[0];
-            if (f) handleFileSelect(f);
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                accept: "image/jpeg,image/png,image/webp",
-                style: { display: "none" },
-                onChange: (e) => {
-                  const f = e.target.files?.[0];
-                  if (f) handleFileSelect(f);
-                }
+    return /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
+        /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
+        /* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
+      ] }),
+      /* @__PURE__ */ jsxs("button", { onClick: () => setView("sizing-choice"), className: cx("ps-tryon-submit", cn.submitButton), children: [
+        "Continue to Sizing ",
+        /* @__PURE__ */ jsx(ArrowRightIcon, {})
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(`ps-tryon-upload${dragOver ? " ps-tryon-drag-over" : ""}`, cn.uploadZone),
+        onClick: () => fileInputRef.current?.click(),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDragOver(true);
+        },
+        onDragLeave: () => setDragOver(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDragOver(false);
+          const f = e.dataTransfer?.files?.[0];
+          if (f) handleFileSelect(f);
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/jpeg,image/png,image/webp",
+              style: { display: "none" },
+              onChange: (e) => {
+                const f = e.target.files?.[0];
+                if (f) handleFileSelect(f);
               }
-            ),
-            /* @__PURE__ */ jsx(UploadIcon, {}),
-            /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
-            /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
-          ]
-        }
-      )
-    ] });
+            }
+          ),
+          /* @__PURE__ */ jsx(UploadIcon, {}),
+          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
+          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
+        ]
+      }
+    ) });
   }
   function SizingChoiceView() {
     const sgAvailable = sizeGuide?.found === true;
-    const sgDisabled = !sizeGuideFetching && !sgAvailable;
-    const disabledClass = sgDisabled ? " ps-tryon-choice-disabled" : sizeGuideFetching ? " ps-tryon-choice-loading" : "";
+    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("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" })
+      ] }) });
+    }
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-choice", children: [
       /* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: "How would you like to find your size?" }),
-      sgDisabled && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice", children: "Size guide is not available for this product" }),
-      sizeGuideFetching && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice ps-tryon-sg-loading", children: "Checking size guide availability..." }),
+      sgChecked && !sgAvailable && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sg-notice", children: "Size guide is not available for this product — sizing will use standard measurements" }),
+      sgChecked && sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice ps-tryon-sg-found", children: [
+        /* @__PURE__ */ jsx(CheckIcon, { size: 14 }),
+        " Size guide found for this product"
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
           setSizingMethod("exact");
           setView("sizing-form");
         }, children: [
@@ -823,7 +824,7 @@ function PrimeStyleTryonInner({
           ] }),
           /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
         ] }),
-        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
           setSizingMethod("quick");
           setView("sizing-form");
         }, children: [
@@ -850,6 +851,17 @@ function PrimeStyleTryonInner({
     const isFemale = formGender === "female";
     const isCm = sizingUnit === "cm";
     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) => {
+        if (e.target.value) applyProfile(e.target.value);
+      }, children: [
+        /* @__PURE__ */ jsx("option", { value: "", children: "Auto-fill from saved profile..." }),
+        profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
+          p.name,
+          " (",
+          p.gender === "female" ? "Women's" : "Men's",
+          ")"
+        ] }, p.id))
+      ] }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
         /* @__PURE__ */ jsx("label", { children: "I'm shopping for" }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-toggle", children: [
@@ -872,16 +884,6 @@ function PrimeStyleTryonInner({
         setHeightUnit(v === "cm" ? "cm" : "ft");
         setWeightUnit(v === "cm" ? "kg" : "lbs");
       } }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: "Height" }),
-        heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
-          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", defaultValue: formRef.current.heightFeet || "", onInput: (e) => updateField("heightFeet", e.target.value) }),
-          /* @__PURE__ */ jsx("span", { children: "ft" }),
-          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "4", defaultValue: formRef.current.heightInches || "", onInput: (e) => updateField("heightInches", e.target.value) }),
-          /* @__PURE__ */ jsx("span", { children: "in" })
-        ] }) : /* @__PURE__ */ jsx("input", { type: "number", placeholder: "e.g. 175", defaultValue: formRef.current.height || "", onInput: (e) => updateField("height", e.target.value) }),
-        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "ft", value: "ft" }], value: heightUnit, onChange: setHeightUnit })
-      ] }),
       sizingMethod === "exact" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         isFemale ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(InputRow, { label: "Bust *", fieldKey: "bust", placeholder: isCm ? "e.g. 88" : "e.g. 35", type: "number", unit: sizingUnit }),
@@ -917,11 +919,23 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: isCm ? "e.g. 27" : "e.g. 10.5", type: "number", unit: sizingUnit }),
           /* @__PURE__ */ jsx(InputRow, { label: shoeField.label, fieldKey: shoeField.key, placeholder: shoeField.ph })
         ] })
-      ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: "Weight" }),
-        /* @__PURE__ */ jsx("input", { type: "number", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", defaultValue: formRef.current.weight || "", onInput: (e) => updateField("weight", e.target.value) }),
-        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "kg", value: "kg" }, { label: "lbs", value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
-      ] }) }),
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+          /* @__PURE__ */ jsx("label", { children: "Height *" }),
+          heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
+            /* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", defaultValue: formRef.current.heightFeet || "", onInput: (e) => updateField("heightFeet", e.target.value) }),
+            /* @__PURE__ */ jsx("span", { children: "ft" }),
+            /* @__PURE__ */ jsx("input", { type: "number", placeholder: "4", defaultValue: formRef.current.heightInches || "", onInput: (e) => updateField("heightInches", e.target.value) }),
+            /* @__PURE__ */ jsx("span", { children: "in" })
+          ] }) : /* @__PURE__ */ jsx("input", { type: "number", placeholder: "e.g. 175", defaultValue: formRef.current.height || "", onInput: (e) => updateField("height", e.target.value) }),
+          /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "ft", value: "ft" }], value: heightUnit, onChange: setHeightUnit })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
+          /* @__PURE__ */ jsx("label", { children: "Weight *" }),
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", defaultValue: formRef.current.weight || "", onInput: (e) => updateField("weight", e.target.value) }),
+          /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "kg", value: "kg" }, { label: "lbs", value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
+        ] })
+      ] }),
       /* @__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: [
         "Get My Size & Try On ",
@@ -1328,15 +1342,25 @@ const STYLES = `
     padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
     background: rgba(187,148,92,0.12); color: #bb945c; font-size: 10px; font-weight: 600;
   }
-  .ps-tryon-choice-disabled { opacity: 0.4; cursor: not-allowed !important; pointer-events: none; }
-  .ps-tryon-choice-disabled:hover { border-color: #333; transform: none; box-shadow: none; }
-  .ps-tryon-choice-disabled::before { display: none; }
-  .ps-tryon-choice-loading { opacity: 0.5; cursor: wait !important; pointer-events: none; }
   .ps-tryon-sg-notice {
     font-size: 12px; color: #999; text-align: center; padding: 10px 14px;
     margin-bottom: 12px; border: 1px solid #333; border-radius: 10px; background: #1a1b1a;
   }
-  .ps-tryon-sg-loading { border-style: dashed; }
+  .ps-tryon-sg-found {
+    color: #4ade80; border-color: rgba(74,222,128,0.2); background: rgba(74,222,128,0.05);
+    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 .ps-tryon-section-title { margin-bottom: 6px; }
+  .ps-tryon-sg-checking-sub { font-size: 13px; color: #999; margin: 0; }
 
   /* Sizing form */
   .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }

package/package.json

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