@primestyleai/tryon 2.0.1 → 2.0.3

package/dist/react/index.js

@@ -60,6 +60,22 @@ function lbsToKg(lbs) {
 function ftInToCm(ft, inch) {
   return +(ft * 30.48 + inch * 2.54).toFixed(1);
 }
+function SvgIcon({ d, size = 18, strokeWidth = 2 }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d })
+    }
+  );
+}
 function CameraIcon({ size = 18 }) {
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ 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" }),
@@ -160,7 +176,9 @@ function PrimeStyleTryon({
   const [resultImageUrl, setResultImageUrl] = useState(null);
   const [errorMessage, setErrorMessage] = useState(null);
   const [dragOver, setDragOver] = useState(false);
-  const [countdown, setCountdown] = useState(25);
+  const countdownRef = useRef(25);
+  const countdownElRef = useRef(null);
+  const countdownCircleRef = useRef(null);
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
   const [sizeGuide, setSizeGuide] = useState(null);
@@ -169,7 +187,8 @@ function PrimeStyleTryon({
   const [sizingUnit, setSizingUnit] = useState(imperial ? "in" : "cm");
   const [heightUnit, setHeightUnit] = useState(imperial ? "ft" : "cm");
   const [weightUnit, setWeightUnit] = useState(imperial ? "lbs" : "kg");
-  const [formData, setFormData] = useState({});
+  const formRef = useRef({});
+  const [formGender, setFormGender] = useState("male");
   const [profiles, setProfiles] = useState(() => lsGet("profiles", []));
   const [history, setHistory] = useState(() => lsGet("history", []));
   const [activeProfileId, setActiveProfileId] = useState(null);
@@ -199,15 +218,12 @@ function PrimeStyleTryon({
   }, [apiUrl]);
   useEffect(() => {
     if (view === "processing") {
-      setCountdown(25);
+      countdownRef.current = 25;
       const interval = setInterval(() => {
-        setCountdown((p) => {
-          if (p <= 1) {
-            clearInterval(interval);
-            return 0;
-          }
-          return p - 1;
-        });
+        countdownRef.current -= 1;
+        if (countdownElRef.current) countdownElRef.current.textContent = String(Math.max(countdownRef.current, 0));
+        if (countdownCircleRef.current) countdownCircleRef.current.style.strokeDashoffset = `${Math.max(countdownRef.current, 0) / 25 * 326.73}`;
+        if (countdownRef.current <= 0) clearInterval(interval);
       }, 1e3);
       return () => clearInterval(interval);
     }
@@ -275,7 +291,8 @@ function PrimeStyleTryon({
     setSizingResult(null);
     setSizeGuide(null);
     setProfileSaved(false);
-    setFormData({});
+    formRef.current = {};
+    setFormGender("male");
     unsubRef.current?.();
     unsubRef.current = null;
     if (pollingRef.current) {
@@ -349,23 +366,23 @@ function PrimeStyleTryon({
     };
     if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
     if (sizingMethod === "exact") {
-      const m = { gender: formData.gender || "male" };
-      if (formData.height) m.heightCm = heightUnit === "ft" ? ftInToCm(parseFloat(formData.heightFeet || "0"), parseFloat(formData.heightInches || "0")) : parseFloat(formData.height);
-      if (formData.weight) m.weightKg = weightUnit === "lbs" ? lbsToKg(parseFloat(formData.weight)) : parseFloat(formData.weight);
+      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 (formData[k]) m[k] = sizingUnit === "in" ? inToCm(parseFloat(formData[k])) : parseFloat(formData[k]);
+        if (formRef.current[k]) m[k] = sizingUnit === "in" ? inToCm(parseFloat(formRef.current[k])) : parseFloat(formRef.current[k]);
       }
-      if (formData.shoeEU) m.shoeEU = formData.shoeEU;
-      if (formData.shoeUS) m.shoeUS = formData.shoeUS;
-      if (formData.shoeUK) m.shoeUK = formData.shoeUK;
-      if (formData.fitPreference) m.fitPreference = formData.fitPreference;
+      if (formRef.current.shoeEU) m.shoeEU = formRef.current.shoeEU;
+      if (formRef.current.shoeUS) m.shoeUS = formRef.current.shoeUS;
+      if (formRef.current.shoeUK) m.shoeUK = formRef.current.shoeUK;
+      if (formRef.current.fitPreference) m.fitPreference = formRef.current.fitPreference;
       payload.measurements = m;
     } else {
       payload.quickEstimate = {
-        heightCm: heightUnit === "ft" ? ftInToCm(parseFloat(formData.heightFeet || "0"), parseFloat(formData.heightInches || "0")) : parseFloat(formData.height || "0"),
-        weightKg: weightUnit === "lbs" ? lbsToKg(parseFloat(formData.weight || "0")) : parseFloat(formData.weight || "0"),
-        gender: formData.gender || "male"
+        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"),
+        gender: formRef.current.gender || "male"
       };
     }
     try {
@@ -380,7 +397,7 @@ function PrimeStyleTryon({
       }
     } catch {
     }
-  }, [apiUrl, sizingMethod, sizingCountry, formData, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle]);
+  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle]);
   const handleSubmit = useCallback(async () => {
     if (!selectedFile || !apiRef.current || !sseRef.current) {
       const msg = !apiRef.current ? "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY" : "No file selected";
@@ -477,29 +494,30 @@ function PrimeStyleTryon({
     if (p.shoeUS) fd.shoeUS = p.shoeUS;
     if (p.shoeUK) fd.shoeUK = p.shoeUK;
     if (p.fitPreference) fd.fitPreference = p.fitPreference;
-    setFormData(fd);
+    formRef.current = fd;
+    setFormGender(fd.gender || "male");
   }, [profiles]);
   const saveProfile = useCallback((name) => {
     const id = activeProfileId || `p_${Date.now()}`;
     const p = {
       id,
       name,
-      gender: formData.gender || "male",
-      heightCm: formData.height ? parseFloat(formData.height) : void 0,
-      weightKg: formData.weight ? parseFloat(formData.weight) : void 0,
-      chest: formData.chest ? parseFloat(formData.chest) : void 0,
-      bust: formData.bust ? parseFloat(formData.bust) : void 0,
-      waist: formData.waist ? parseFloat(formData.waist) : void 0,
-      hips: formData.hips ? parseFloat(formData.hips) : void 0,
-      shoulderWidth: formData.shoulderWidth ? parseFloat(formData.shoulderWidth) : void 0,
-      sleeveLength: formData.sleeveLength ? parseFloat(formData.sleeveLength) : void 0,
-      inseam: formData.inseam ? parseFloat(formData.inseam) : void 0,
-      neckCircumference: formData.neckCircumference ? parseFloat(formData.neckCircumference) : void 0,
-      footLengthCm: formData.footLengthCm ? parseFloat(formData.footLengthCm) : void 0,
-      shoeEU: formData.shoeEU,
-      shoeUS: formData.shoeUS,
-      shoeUK: formData.shoeUK,
-      fitPreference: formData.fitPreference,
+      gender: formRef.current.gender || "male",
+      heightCm: formRef.current.height ? parseFloat(formRef.current.height) : void 0,
+      weightKg: formRef.current.weight ? parseFloat(formRef.current.weight) : void 0,
+      chest: formRef.current.chest ? parseFloat(formRef.current.chest) : void 0,
+      bust: formRef.current.bust ? parseFloat(formRef.current.bust) : void 0,
+      waist: formRef.current.waist ? parseFloat(formRef.current.waist) : void 0,
+      hips: formRef.current.hips ? parseFloat(formRef.current.hips) : void 0,
+      shoulderWidth: formRef.current.shoulderWidth ? parseFloat(formRef.current.shoulderWidth) : void 0,
+      sleeveLength: formRef.current.sleeveLength ? parseFloat(formRef.current.sleeveLength) : void 0,
+      inseam: formRef.current.inseam ? parseFloat(formRef.current.inseam) : void 0,
+      neckCircumference: formRef.current.neckCircumference ? parseFloat(formRef.current.neckCircumference) : void 0,
+      footLengthCm: formRef.current.footLengthCm ? parseFloat(formRef.current.footLengthCm) : void 0,
+      shoeEU: formRef.current.shoeEU,
+      shoeUS: formRef.current.shoeUS,
+      shoeUK: formRef.current.shoeUK,
+      fitPreference: formRef.current.fitPreference,
       createdAt: Date.now()
     };
     setProfiles((prev) => {
@@ -513,7 +531,7 @@ function PrimeStyleTryon({
     });
     setActiveProfileId(id);
     setProfileSaved(true);
-  }, [activeProfileId, formData]);
+  }, [activeProfileId]);
   const saveHistoryEntry = useCallback(() => {
     const entry = {
       id: `h_${Date.now()}`,
@@ -539,7 +557,7 @@ function PrimeStyleTryon({
     }
   }, [view]);
   const updateField = useCallback((key, val) => {
-    setFormData((prev) => ({ ...prev, [key]: val }));
+    formRef.current[key] = val;
   }, []);
   const shoeField = useMemo(() => {
     const map = {
@@ -604,8 +622,8 @@ function PrimeStyleTryon({
         {
           type,
           placeholder,
-          value: formData[fieldKey] || "",
-          onChange: (e) => updateField(fieldKey, e.target.value)
+          defaultValue: formRef.current[fieldKey] || "",
+          onInput: (e) => updateField(fieldKey, e.target.value)
         }
       ),
       unit && /* @__PURE__ */ jsx("span", { className: "ps-tryon-input-unit", children: unit })
@@ -709,76 +727,92 @@ function PrimeStyleTryon({
           setView("sizing-form");
         }, children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Exact Measurements" }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Enter your body measurements for the most accurate fit" }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Most Accurate" })
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Enter my measurements" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Chest, waist, hips, shoes & more" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
         ] }),
         /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
           setSizingMethod("quick");
           setView("sizing-form");
         }, children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Quick Estimate" }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Just height, weight & gender — fast but less precise" })
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Just height & weight" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Quick estimate in seconds" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+          setSizingMethod(null);
+          handleSubmit();
+        }, children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(SvgIcon, { d: "M13 5H1M13 9H1M13 13H1M5 17l4 4 8-8", size: 24, strokeWidth: 1.5 }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Skip sizing" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Just show me the try-on" })
+          ] })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx("button", { className: "ps-tryon-skip-btn", onClick: () => {
-        setSizingMethod(null);
-        handleSubmit();
-      }, children: "Skip sizing — just try it on" })
+      ] })
     ] });
   }
   function SizingFormView() {
-    const isFemale = formData.gender === "female";
+    const isFemale = formGender === "female";
+    const isCm = sizingUnit === "cm";
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: "Sizing region" }),
-        /* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: c.label }, c.code)) })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: "Gender" }),
+        /* @__PURE__ */ jsx("label", { children: "I'm shopping for" }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-toggle", children: [
-          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${formData.gender !== "female" ? " ps-active" : ""}`, onClick: () => updateField("gender", "male"), children: "Men's" }),
-          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${formData.gender === "female" ? " ps-active" : ""}`, onClick: () => updateField("gender", "female"), children: "Women's" })
+          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${!isFemale ? " ps-active" : ""}`, onClick: () => {
+            updateField("gender", "male");
+            setFormGender("male");
+          }, children: "Men's" }),
+          /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${isFemale ? " ps-active" : ""}`, onClick: () => {
+            updateField("gender", "female");
+            setFormGender("female");
+          }, children: "Women's" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: "Height" }),
-        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "ft/in", value: "ft" }], value: heightUnit, onChange: setHeightUnit })
+        /* @__PURE__ */ jsx("label", { children: "Sizing region" }),
+        /* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: c.label }, c.code)) })
       ] }),
-      heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row ps-tryon-dual-input", children: [
-        /* @__PURE__ */ jsx("input", { type: "number", placeholder: "ft", value: formData.heightFeet || "", onChange: (e) => updateField("heightFeet", e.target.value) }),
-        /* @__PURE__ */ jsx("input", { type: "number", placeholder: "in", value: formData.heightInches || "", onChange: (e) => updateField("heightInches", e.target.value) })
-      ] }) : /* @__PURE__ */ jsx(InputRow, { label: "", fieldKey: "height", placeholder: "e.g. 175", type: "number", unit: "cm" }),
+      sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: setSizingUnit }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-        /* @__PURE__ */ jsx("label", { children: "Weight" }),
-        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "kg", value: "kg" }, { label: "lbs", value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
+        /* @__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__ */ jsx(InputRow, { label: "", fieldKey: "weight", placeholder: weightUnit === "lbs" ? "e.g. 170" : "e.g. 75", type: "number", unit: weightUnit }),
-      sizingMethod === "exact" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-          /* @__PURE__ */ jsx("label", { children: "Measurements" }),
-          /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "cm", value: "cm" }, { label: "in", value: "in" }], value: sizingUnit, onChange: setSizingUnit })
-        ] }),
+      sizingMethod === "exact" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         isFemale ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(InputRow, { label: "Bust", fieldKey: "bust", placeholder: "e.g. 90", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Waist", fieldKey: "waist", placeholder: "e.g. 70", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Hips", fieldKey: "hips", placeholder: "e.g. 95", type: "number", unit: sizingUnit })
+          /* @__PURE__ */ jsx(InputRow, { label: "Bust *", fieldKey: "bust", placeholder: isCm ? "e.g. 88" : "e.g. 35", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Waist *", fieldKey: "waist", placeholder: isCm ? "e.g. 70" : "e.g. 28", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Hips *", fieldKey: "hips", placeholder: isCm ? "e.g. 96" : "e.g. 38", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Shoulders", fieldKey: "shoulderWidth", placeholder: isCm ? "e.g. 39" : "e.g. 15", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Inseam", fieldKey: "inseam", placeholder: isCm ? "e.g. 76" : "e.g. 30", type: "number", unit: sizingUnit })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(InputRow, { label: "Chest", fieldKey: "chest", placeholder: "e.g. 100", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Waist", fieldKey: "waist", placeholder: "e.g. 82", type: "number", unit: sizingUnit }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Hips", fieldKey: "hips", placeholder: "e.g. 98", type: "number", unit: sizingUnit })
+          /* @__PURE__ */ jsx(InputRow, { label: "Chest *", fieldKey: "chest", placeholder: isCm ? "e.g. 104" : "e.g. 41", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Waist *", fieldKey: "waist", placeholder: isCm ? "e.g. 84" : "e.g. 33", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Shoulders", fieldKey: "shoulderWidth", placeholder: isCm ? "e.g. 46" : "e.g. 18", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Sleeve", fieldKey: "sleeveLength", placeholder: isCm ? "e.g. 64" : "e.g. 25", type: "number", unit: sizingUnit }),
+          /* @__PURE__ */ jsx(InputRow, { label: "Inseam", fieldKey: "inseam", placeholder: isCm ? "e.g. 81" : "e.g. 32", type: "number", unit: sizingUnit })
         ] }),
-        /* @__PURE__ */ jsx(InputRow, { label: "Shoulder Width", fieldKey: "shoulderWidth", placeholder: "e.g. 45", type: "number", unit: sizingUnit }),
-        /* @__PURE__ */ jsx(InputRow, { label: "Sleeve Length", fieldKey: "sleeveLength", placeholder: "e.g. 65", type: "number", unit: sizingUnit }),
-        /* @__PURE__ */ jsx(InputRow, { label: "Inseam", fieldKey: "inseam", placeholder: "e.g. 80", type: "number", unit: sizingUnit }),
         isFemale && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-          /* @__PURE__ */ jsx("label", { children: "Fit preference" }),
+          /* @__PURE__ */ jsx("label", { children: "Fit type" }),
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: ["petite", "standard", "tall", "plus"].map((fp) => /* @__PURE__ */ jsx(
             "button",
             {
-              className: `ps-tryon-unit-btn${(formData.fitPreference || "standard") === fp ? " ps-active" : ""}`,
-              onClick: () => updateField("fitPreference", fp),
+              className: `ps-tryon-unit-btn${(formRef.current.fitPreference || "standard") === fp ? " ps-active" : ""}`,
+              onClick: (e) => {
+                updateField("fitPreference", fp);
+                const btns = e.target.parentElement.querySelectorAll(".ps-tryon-unit-btn");
+                btns.forEach((b) => b.classList.toggle("ps-active", b.textContent?.toLowerCase() === fp));
+              },
               children: fp.charAt(0).toUpperCase() + fp.slice(1)
             },
             fp
@@ -786,28 +820,32 @@ function PrimeStyleTryon({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-shoe-section", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-shoe-title", children: "Shoe sizing (optional)" }),
-          /* @__PURE__ */ jsx(InputRow, { label: "Foot length", fieldKey: "footLengthCm", placeholder: sizingUnit === "in" ? "e.g. 10.5" : "e.g. 27", type: "number", unit: sizingUnit }),
+          /* @__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__ */ 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 ",
         /* @__PURE__ */ jsx(ArrowRightIcon, {})
       ] })
-    ] });
+    ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}`);
   }
   function ProcessingView() {
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-      countdown > 0 ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-countdown-ring", children: [
         /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 120", children: [
           /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-track", cx: "60", cy: "60", r: "52" }),
-          /* @__PURE__ */ jsx("circle", { className: "ps-tryon-countdown-progress", cx: "60", cy: "60", r: "52", style: { strokeDashoffset: `${countdown / 25 * 326.73}` } })
+          /* @__PURE__ */ jsx("circle", { ref: countdownCircleRef, className: "ps-tryon-countdown-progress", cx: "60", cy: "60", r: "52", style: { strokeDashoffset: `${25 / 25 * 326.73}` } })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "ps-tryon-countdown-number", children: countdown })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-done-pulse", children: /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-spinner", cn.spinner) }) }),
-      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-text", cn.processingText), children: countdown > 0 ? "Generating your try-on..." : "Almost there..." }),
-      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: countdown > 0 ? "This usually takes 15-25 seconds" : "Finishing up your look" })
+        /* @__PURE__ */ jsx("span", { ref: countdownElRef, className: "ps-tryon-countdown-number", children: "25" })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-text", cn.processingText), children: "Generating your try-on..." }),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
     ] });
   }
   function ResultView() {
@@ -851,14 +889,17 @@ function PrimeStyleTryon({
           /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-btn-retry", cn.retryButton), children: "Try Another" })
         ] }),
         sizingMethod && !profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-prompt", children: [
-          /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Profile name (e.g. Me)", value: profileName, onChange: (e) => setProfileName(e.target.value) }),
-          /* @__PURE__ */ jsx("button", { onClick: () => {
-            if (profileName.trim()) saveProfile(profileName.trim());
-          }, children: "Save" })
+          /* @__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: () => {
+              if (profileName.trim()) saveProfile(profileName.trim());
+            }, children: "Save" })
+          ] })
         ] }),
         profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-done", children: [
           /* @__PURE__ */ jsx(CheckIcon, {}),
-          " Profile saved"
+          " Measurements saved to profile"
         ] })
       ] })
     ] });
@@ -966,19 +1007,19 @@ function PrimeStyleTryon({
   function renderBody() {
     switch (view) {
       case "welcome":
-        return /* @__PURE__ */ jsx(WelcomeView, {});
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(WelcomeView, {}) }, "v-welcome");
       case "upload":
-        return /* @__PURE__ */ jsx(UploadView, {});
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(UploadView, {}) }, "v-upload");
       case "sizing-choice":
-        return /* @__PURE__ */ jsx(SizingChoiceView, {});
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(SizingChoiceView, {}) }, "v-choice");
       case "sizing-form":
-        return /* @__PURE__ */ jsx(SizingFormView, {});
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(SizingFormView, {}) }, "v-form");
       case "processing":
-        return /* @__PURE__ */ jsx(ProcessingView, {});
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(ProcessingView, {}) }, "v-proc");
       case "result":
-        return /* @__PURE__ */ jsx(ResultView, {});
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(ResultView, {}) }, "v-result");
       case "error":
-        return /* @__PURE__ */ jsx(ErrorView, {});
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(ErrorView, {}) }, "v-error");
       default:
         return null;
     }
@@ -1095,8 +1136,8 @@ const STYLES = `
 
   /* Body */
   .ps-tryon-body { padding: 24px; min-height: 300px; }
-  .ps-tryon-body > * { animation: ps-fade-up 0.35s ease both; }
   @keyframes ps-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
+  .ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
 
   /* Welcome */
   .ps-tryon-welcome { text-align: center; }
@@ -1168,28 +1209,25 @@ const STYLES = `
 
   /* Sizing choice */
   .ps-tryon-sizing-choice { text-align: center; }
-  .ps-tryon-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 20px; }
-  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 12px; }
+  .ps-tryon-section-title { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 16px; }
+  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 10px; }
   .ps-tryon-choice-card {
-    padding: 20px; border: 1.5px solid #333; border-radius: 14px;
+    display: flex; align-items: center; gap: 14px; padding: 16px;
+    border: 1.5px solid #333; border-radius: 12px;
     background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
-    display: block; width: 100%; font-family: inherit;
+    width: 100%; font-family: inherit; position: relative; overflow: hidden;
   }
-  .ps-tryon-choice-card:hover { border-color: #bb945c; box-shadow: 0 4px 20px rgba(187,148,92,0.08); }
-  .ps-tryon-choice-icon { color: #bb945c; margin-bottom: 8px; }
+  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(187,148,92,0.08); }
+  .ps-tryon-choice-card:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #bb945c; }
+  .ps-tryon-choice-icon { color: #bb945c; flex-shrink: 0; }
   .ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
-  .ps-tryon-choice-title { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; }
-  .ps-tryon-choice-desc { font-size: 12px; color: #999; }
+  .ps-tryon-choice-info { flex: 1; min-width: 0; }
+  .ps-tryon-choice-title { font-size: 14px; font-weight: 600; color: #fff; }
+  .ps-tryon-choice-desc { font-size: 12px; color: #999; margin-top: 2px; }
   .ps-tryon-choice-badge {
-    display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 20px;
-    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 11px; font-weight: 600;
-  }
-  .ps-tryon-skip-btn {
-    margin-top: 16px; padding: 10px; background: none; border: 1px solid #333;
-    border-radius: 10px; color: #999; font-size: 13px; cursor: pointer; transition: all 0.2s;
-    width: 100%; font-family: inherit;
+    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-skip-btn:hover { border-color: #666; color: #ccc; }
 
   /* Sizing form */
   .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }
@@ -1204,8 +1242,11 @@ const STYLES = `
   .ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-input-row input:focus { border-color: #bb945c; }
   .ps-tryon-input-unit { font-size: 12px; color: #666; flex-shrink: 0; }
-  .ps-tryon-dual-input { gap: 8px; }
-  .ps-tryon-dual-input input { width: 50%; }
+  .ps-tryon-height-ft { display: flex; align-items: center; gap: 6px; flex: 1; }
+  .ps-tryon-height-ft input { width: 60px; padding: 10px 10px; border: 1.5px solid #333; border-radius: 10px; background: #1a1b1a; color: #fff; font-size: 14px; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }
+  .ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+  .ps-tryon-height-ft input:focus { border-color: #bb945c; }
+  .ps-tryon-height-ft span { font-size: 12px; color: #666; }
   .ps-tryon-country-select {
     flex: 1; padding: 10px 36px 10px 14px; border: 1.5px solid #333; border-radius: 10px;
     background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit;
@@ -1280,17 +1321,19 @@ const STYLES = `
   .ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
 
   /* Save profile prompt */
-  .ps-tryon-save-prompt { display: flex; gap: 8px; margin-top: 14px; }
-  .ps-tryon-save-prompt input {
+  .ps-tryon-save-prompt { margin-top: 14px; padding: 14px; border: 1px solid #333; border-radius: 12px; background: #1a1b1a; }
+  .ps-tryon-save-label { font-size: 12px; color: #999; margin-bottom: 10px; }
+  .ps-tryon-save-row { display: flex; gap: 8px; }
+  .ps-tryon-save-row input {
     flex: 1; padding: 10px 14px; border: 1.5px solid #333; border-radius: 10px;
-    background: #1a1b1a; color: #fff; font-size: 13px; font-family: inherit; outline: none;
+    background: #111211; color: #fff; font-size: 13px; font-family: inherit; outline: none;
   }
-  .ps-tryon-save-prompt input:focus { border-color: #bb945c; }
-  .ps-tryon-save-prompt button {
+  .ps-tryon-save-row input:focus { border-color: #bb945c; }
+  .ps-tryon-save-row button {
     padding: 10px 20px; background: #bb945c; color: #111; border: none; border-radius: 10px;
     font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
   }
-  .ps-tryon-save-prompt button:hover { opacity: 0.9; }
+  .ps-tryon-save-row button:hover { opacity: 0.9; }
   .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; }
 

package/package.json

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