@primestyleai/tryon 2.0.2 → 2.0.4

package/dist/react/index.js

@@ -182,12 +182,15 @@ function PrimeStyleTryon({
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
   const [sizeGuide, setSizeGuide] = useState(null);
+  const [sizeGuideFetching, setSizeGuideFetching] = useState(false);
+  const sizeGuideFetchedRef = useRef(false);
   const [sizingCountry, setSizingCountry] = useState(detectLocale);
   const imperial = isImperial(sizingCountry);
   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);
@@ -256,6 +259,21 @@ function PrimeStyleTryon({
   useEffect(() => {
     lsSet("history", history);
   }, [history]);
+  useEffect(() => {
+    if (view !== "sizing-choice" || sizeGuideFetchedRef.current || !apiRef.current) return;
+    sizeGuideFetchedRef.current = true;
+    setSizeGuideFetching(true);
+    const baseUrl = getApiUrl(apiUrl);
+    const key = getApiKey();
+    fetch(`${baseUrl}/api/v1/sizing/sizeguide`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Authorization: `Bearer ${key}` },
+      body: JSON.stringify({ product: { title: productTitle, variants: [] } })
+    }).then((r) => r.ok ? r.json() : null).then((data) => {
+      if (data) setSizeGuide(data);
+      else setSizeGuide({ found: false });
+    }).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
+  }, [view, apiUrl, productTitle]);
   const stepIndex = useMemo(() => {
     switch (view) {
       case "welcome":
@@ -290,7 +308,10 @@ function PrimeStyleTryon({
     setSizingResult(null);
     setSizeGuide(null);
     setProfileSaved(false);
-    setFormData({});
+    formRef.current = {};
+    setFormGender("male");
+    sizeGuideFetchedRef.current = false;
+    setSizeGuideFetching(false);
     unsubRef.current?.();
     unsubRef.current = null;
     if (pollingRef.current) {
@@ -364,23 +385,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 {
@@ -395,7 +416,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";
@@ -492,29 +513,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) => {
@@ -528,7 +550,7 @@ function PrimeStyleTryon({
     });
     setActiveProfileId(id);
     setProfileSaved(true);
-  }, [activeProfileId, formData]);
+  }, [activeProfileId]);
   const saveHistoryEntry = useCallback(() => {
     const entry = {
       id: `h_${Date.now()}`,
@@ -554,7 +576,7 @@ function PrimeStyleTryon({
     }
   }, [view]);
   const updateField = useCallback((key, val) => {
-    setFormData((prev) => ({ ...prev, [key]: val }));
+    formRef.current[key] = val;
   }, []);
   const shoeField = useMemo(() => {
     const map = {
@@ -619,8 +641,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 })
@@ -716,10 +738,15 @@ function PrimeStyleTryon({
     ] });
   }
   function SizingChoiceView() {
+    const sgAvailable = sizeGuide?.found === true;
+    const sgDisabled = !sizeGuideFetching && !sgAvailable;
+    const disabledClass = sgDisabled ? " ps-tryon-choice-disabled" : sizeGuideFetching ? " ps-tryon-choice-loading" : "";
     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..." }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
           setSizingMethod("exact");
           setView("sizing-form");
         }, children: [
@@ -730,7 +757,7 @@ function PrimeStyleTryon({
           ] }),
           /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: "Best accuracy" })
         ] }),
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
+        /* @__PURE__ */ jsxs("button", { className: `ps-tryon-choice-card${disabledClass}`, disabled: sgDisabled || sizeGuideFetching, onClick: () => {
           setSizingMethod("quick");
           setView("sizing-form");
         }, children: [
@@ -754,58 +781,62 @@ function PrimeStyleTryon({
     ] });
   }
   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: "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)) })
+      ] }),
+      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: "Height" }),
         heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-height-ft", children: [
-          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", value: formData.heightFeet || "", onChange: (e) => updateField("heightFeet", e.target.value) }),
+          /* @__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", value: formData.heightInches || "", onChange: (e) => updateField("heightInches", e.target.value) }),
+          /* @__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", value: formData.height || "", onChange: (e) => updateField("height", e.target.value) }),
+        ] }) : /* @__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", value: formData.weight || "", onChange: (e) => updateField("weight", e.target.value) }),
-        /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: "kg", value: "kg" }, { label: "lbs", value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
-      ] }),
-      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
@@ -813,16 +844,20 @@ 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: [
@@ -996,19 +1031,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;
     }
@@ -1125,8 +1160,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; }
@@ -1217,6 +1252,15 @@ 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; }
 
   /* Sizing form */
   .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 12px; }

package/package.json

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