@primestyleai/tryon 4.2.0 → 4.2.2

package/dist/react/index.js

@@ -1014,7 +1014,7 @@ function PrimeStyleTryonInner({
     if (p.weightUnit) setWeightUnit(p.weightUnit);
     setFormKey((k) => k + 1);
   }, [profiles]);
-  const saveProfile = useCallback((name, asNew) => {
+  useCallback((name, asNew) => {
     const id = (asNew ? null : activeProfileId) || `p_${Date.now()}`;
     const p = {
       id,
@@ -1170,24 +1170,6 @@ function PrimeStyleTryonInner({
       ] })
     ] }, i)) }) });
   }
-  function InputRow({ label, fieldKey, placeholder, type = "text", unit }) {
-    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-      /* @__PURE__ */ jsx("label", { children: label }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          type,
-          placeholder,
-          defaultValue: formRef.current[fieldKey] || "",
-          onInput: (e) => updateField(fieldKey, e.target.value)
-        }
-      ),
-      unit && /* @__PURE__ */ jsx("span", { className: "ps-tryon-input-unit", children: unit })
-    ] });
-  }
-  function UnitToggle({ options, value, onChange }) {
-    return /* @__PURE__ */ jsx("div", { className: "ps-tryon-unit-toggle", children: options.map((o) => /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-btn${value === o.value ? " ps-active" : ""}`, onClick: () => onChange(o.value), children: o.label }, o.value)) });
-  }
   function WelcomeView() {
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-welcome", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-welcome-hero", children: [
@@ -1195,12 +1177,12 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsx("img", { src: productImage, alt: "Product", className: "ps-tryon-welcome-product" }),
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-sparkle", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 20 }) })
         ] }),
-        /* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: t("Find Your Perfect Size") }),
-        /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: t("Get your size instantly, then try it on") })
+        /* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: t("Find Your Size & See It On You") }),
+        /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: t("Get the perfect fit, then try it on virtually") })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-features", children: [
-        { icon: /* @__PURE__ */ jsx(RulerIcon, {}), title: t("Get Your Size"), desc: t("Instant fit recommendation") },
-        { icon: /* @__PURE__ */ jsx(CameraIcon, {}), title: t("Try It On"), desc: t("See how it looks on you") }
+        { icon: /* @__PURE__ */ jsx(RulerIcon, { size: 22 }), title: t("Get Your Size"), desc: t("Instant fit recommendation") },
+        { icon: /* @__PURE__ */ jsx(CameraIcon, { size: 22 }), title: t("Try It On"), desc: t("See how it looks on you") }
       ].map((f, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-feature", children: [
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-icon", children: f.icon }),
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-title", children: f.title }),
@@ -1264,233 +1246,131 @@ function PrimeStyleTryonInner({
     ) });
   }
   function SizingChoiceView() {
+    const [mode, setMode] = useState(sizingMethod === "exact" ? "exact" : "quick");
+    const isCm = sizingUnit === "cm";
     const sgAvailable = sizeGuide?.found === true;
     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-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: t("Checking size guide...") }),
-        /* @__PURE__ */ jsx("p", { className: "ps-tryon-sg-checking-sub", children: t("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: t("How would you like to find your size?") }),
-      sgChecked && !sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice", children: [
-        t("This product doesn't have a size guide — you can still see how it looks on you!"),
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sg-notice-cta", onClick: () => {
-          setSizingMethod(null);
-          setView("upload");
-        }, children: [
-          t("Try It On"),
-          " ",
-          /* @__PURE__ */ jsx(ArrowRightIcon, {})
-        ] })
+    const exactAvailable = sgChecked ? sgAvailable : true;
+    const handleSubmit = async () => {
+      setSizingMethod(mode);
+      setSizingLoading(true);
+      setView("size-result");
+      await submitSizing();
+    };
+    const renderQuickFields = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "ps-tryon-sf-label", children: t("HEIGHT") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-input-wrap", children: heightUnit === "ft" ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-ft-group", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "5", className: "ps-tryon-sf-input", defaultValue: formRef.current.heightFeet || "", onInput: (e) => updateField("heightFeet", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: t("feet") }),
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "10", className: "ps-tryon-sf-input", defaultValue: formRef.current.heightInches || "", onInput: (e) => updateField("heightInches", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: t("inches") })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-inline", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: "175", className: "ps-tryon-sf-input", defaultValue: formRef.current.height || "", onInput: (e) => updateField("height", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: t("cm") })
+        ] }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
-          setSizingMethod("exact");
-          setView("sizing-form");
-        }, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(RulerIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Enter my measurements") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: sizeGuide?.requiredFields?.length ? sizeGuide.requiredFields.filter((f) => f.required).slice(0, 3).map((f) => t(f.label)).join(", ") + (sizeGuide.requiredFields.length > 3 ? ` ${t("& more")}` : "") : t("Chest, waist, hips, shoes & more") })
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "ps-tryon-choice-badge", children: t("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__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Just height & weight") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: t("Quick estimate in seconds") })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
-          setSizingMethod(null);
-          setView("upload");
-        }, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(CameraIcon, { size: 24 }) }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: t("Skip, just try it on") }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: t("Upload a photo to see how it looks") })
-          ] })
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+        /* @__PURE__ */ jsx("label", { className: "ps-tryon-sf-label", children: t("WEIGHT") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-inline", children: [
+          /* @__PURE__ */ jsx("input", { type: "number", placeholder: weightUnit === "lbs" ? "170" : "75", className: "ps-tryon-sf-input", defaultValue: formRef.current.weight || "", onInput: (e) => updateField("weight", e.target.value) }),
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: weightUnit })
         ] })
       ] })
     ] });
-  }
-  function SizingFormView() {
-    const isFemale = formGender === "female";
-    const isCm = sizingUnit === "cm";
-    const [saveToggle, setSaveToggle] = useState(false);
-    const [saveFormName, setSaveFormName] = useState("");
-    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form", children: [
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-back", onClick: () => setView("sizing-choice"), children: [
-        /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
-        " ",
-        t("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: t("Auto-fill from saved profile...") }),
-        profiles.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
-          p.name,
-          " (",
-          p.gender === "female" ? t("Women's") : t("Men's"),
-          ")"
-        ] }, p.id))
-      ] }) }),
-      sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-tabs", children: [
-        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${isCm ? " ps-active" : ""}`, onClick: () => {
-          setSizingUnit("cm");
-          setHeightUnit("cm");
-          setWeightUnit("kg");
-        }, children: "CM" }),
-        /* @__PURE__ */ jsx("button", { className: `ps-tryon-unit-tab${!isCm ? " ps-active" : ""}`, onClick: () => {
-          setSizingUnit("in");
-          setHeightUnit("ft");
-          setWeightUnit("lbs");
-        }, children: "Inches" })
-      ] }),
-      sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
-        const reqFields = dynamicFields.filter((f) => f.required);
-        const optFields = dynamicFields.filter((f) => !f.required);
-        const isShoeProduct = reqFields.some((f) => f.category === "shoe");
-        const isClothingProduct = reqFields.some((f) => f.category === "body");
-        const renderField = (field) => {
-          if (["shoeEU", "shoeUS", "shoeUK"].includes(field.key)) {
-            const regionField = shoeField;
-            const key = regionField.key;
-            const showOriginal = field.key !== key;
-            return /* @__PURE__ */ jsxs("span", { children: [
-              /* @__PURE__ */ jsx(InputRow, { label: `${regionField.label}${field.required ? " *" : ""}`, fieldKey: key, placeholder: regionField.ph }),
-              showOriginal && /* @__PURE__ */ jsx(InputRow, { label: t(field.label), fieldKey: field.key, placeholder: field.placeholder })
-            ] }, field.key);
-          }
-          const phNum = parseFloat(field.placeholder?.replace(/[^0-9.]/g, "") || "");
-          const phIn = !isNaN(phNum) && phNum > 0 && field.unit === "cm" ? String(Math.round(phNum / 2.54)) : "";
-          const placeholder = isCm ? field.placeholder || "" : phIn ? `e.g. ${phIn}` : field.placeholder || "";
-          return /* @__PURE__ */ jsx(
-            InputRow,
-            {
-              label: `${t(field.label)}${field.required ? " *" : ""}`,
-              fieldKey: field.key,
-              placeholder,
-              type: "number",
-              unit: field.unit === "cm" ? sizingUnit : void 0
-            },
-            field.key
-          );
-        };
-        const profileExtras = [];
-        if (isShoeProduct && !dynamicFields.some((f) => f.category === "body")) {
-          const bodyFields = isFemale ? FALLBACK_FIELDS_FEMALE : FALLBACK_FIELDS_MALE;
-          for (const f of bodyFields) {
-            if (!dynamicFields.some((d) => d.key === f.key)) {
-              profileExtras.push({ ...f, required: false });
-            }
-          }
-        }
-        if (isClothingProduct && !dynamicFields.some((f) => f.category === "shoe")) {
-          profileExtras.push({ key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" });
-          profileExtras.push({ key: shoeField.key, label: shoeField.label, required: false, unit: "size", placeholder: shoeField.ph, category: "shoe" });
+    const renderExactFields = () => {
+      const reqFields = dynamicFields.filter((f) => f.required);
+      const optFields = dynamicFields.filter((f) => !f.required);
+      const renderField = (field) => {
+        if (["shoeEU", "shoeUS", "shoeUK"].includes(field.key)) {
+          const regionField = shoeField;
+          return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+            /* @__PURE__ */ jsxs("label", { className: "ps-tryon-sf-label", children: [
+              regionField.label.toUpperCase(),
+              field.required ? " *" : ""
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-inline", children: /* @__PURE__ */ jsx("input", { type: "text", placeholder: regionField.ph, className: "ps-tryon-sf-input", defaultValue: formRef.current[regionField.key] || "", onInput: (e) => updateField(regionField.key, e.target.value) }) })
+          ] }, field.key);
         }
-        const allOptFields = [...optFields, ...profileExtras];
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          reqFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-section-label", children: t("Required for this product") }),
-            reqFields.map(renderField)
-          ] }),
-          isFemale && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-            /* @__PURE__ */ jsx("label", { children: t("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${(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.dataset.fp === fp));
-                },
-                "data-fp": fp,
-                children: t(fp.charAt(0).toUpperCase() + fp.slice(1))
-              },
-              fp
-            )) })
+        const phNum = parseFloat(field.placeholder?.replace(/[^0-9.]/g, "") || "");
+        const phIn = !isNaN(phNum) && phNum > 0 && field.unit === "cm" ? String(Math.round(phNum / 2.54)) : "";
+        const placeholder = isCm ? field.placeholder?.replace("e.g. ", "") || "" : phIn || field.placeholder?.replace("e.g. ", "") || "";
+        return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-row", children: [
+          /* @__PURE__ */ jsxs("label", { className: "ps-tryon-sf-label", children: [
+            t(field.label).toUpperCase(),
+            field.required ? " *" : ""
           ] }),
-          allOptFields.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-optional-section", children: [
-            /* @__PURE__ */ jsxs("button", { className: "ps-tryon-optional-toggle", onClick: (e) => {
-              const wrap = e.target.closest(".ps-tryon-optional-section").querySelector(".ps-tryon-optional-fields");
-              const arrow = e.target.closest(".ps-tryon-optional-toggle").querySelector(".ps-tryon-chevron");
-              if (wrap) {
-                const open = wrap.style.display !== "none";
-                wrap.style.display = open ? "none" : "flex";
-                if (arrow) arrow.style.transform = open ? "rotate(0deg)" : "rotate(180deg)";
-              }
-            }, children: [
-              /* @__PURE__ */ jsx("span", { children: t("Optional — improve accuracy & save to profile") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-chevron", children: "▾" })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-optional-fields", style: { display: "none" }, children: allOptFields.map(renderField) })
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-inline", children: [
+            /* @__PURE__ */ jsx("input", { type: "number", placeholder, className: "ps-tryon-sf-input", defaultValue: formRef.current[field.key] || "", onInput: (e) => updateField(field.key, e.target.value) }),
+            field.unit === "cm" && /* @__PURE__ */ jsx("span", { className: "ps-tryon-sf-unit", children: sizingUnit })
           ] })
-        ] });
-      })() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-          /* @__PURE__ */ jsxs("label", { children: [
-            t("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: t("ft") }),
-            /* @__PURE__ */ jsx("input", { type: "number", placeholder: "4", defaultValue: formRef.current.heightInches || "", onInput: (e) => updateField("heightInches", e.target.value) }),
-            /* @__PURE__ */ jsx("span", { children: t("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: t("cm"), value: "cm" }, { label: t("ft"), value: "ft" }], value: heightUnit, onChange: setHeightUnit })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
-          /* @__PURE__ */ jsxs("label", { children: [
-            t("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: t("kg"), value: "kg" }, { label: t("lbs"), value: "lbs" }], value: weightUnit, onChange: setWeightUnit })
+        ] }, field.key);
+      };
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        reqFields.map(renderField),
+        optFields.length > 0 && /* @__PURE__ */ jsxs("details", { className: "ps-tryon-sf-optional", children: [
+          /* @__PURE__ */ jsx("summary", { className: "ps-tryon-sf-optional-toggle", children: t("Optional fields") }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-optional-fields", children: optFields.map(renderField) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "ps-tryon-disclaimer", children: t("Fill in what you know — more measurements = better accuracy.") }),
-      /* @__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: t("Save as profile") })
+      ] });
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-split", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-tryon-sizing-img-col", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-tryon-sizing-product-img" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-form-col", children: [
+        /* @__PURE__ */ jsx("h3", { className: "ps-tryon-sf-title", children: t("Let's find your best fit") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sf-unit-tabs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `ps-tryon-sf-unit-tab${(isCm || heightUnit === "cm") && mode !== "exact" ? " ps-active" : ""} ${mode === "exact" && isCm ? " ps-active" : ""}`,
+              onClick: () => {
+                setSizingUnit("cm");
+                setHeightUnit("cm");
+                setWeightUnit("kg");
+              },
+              children: t("Metric")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `ps-tryon-sf-unit-tab${(!isCm || heightUnit === "ft") && mode !== "exact" ? " ps-active" : ""} ${mode === "exact" && !isCm ? " ps-active" : ""}`,
+              onClick: () => {
+                setSizingUnit("in");
+                setHeightUnit("ft");
+                setWeightUnit("lbs");
+              },
+              children: t("Imperial")
+            }
+          )
         ] }),
-        saveToggle && /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            className: "ps-tryon-form-save-name",
-            placeholder: t("Profile name (e.g. John, Sarah)"),
-            value: saveFormName,
-            onChange: (e) => setSaveFormName(e.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-submit", onClick: async () => {
-        if (saveToggle && saveFormName.trim()) {
-          saveProfile(saveFormName.trim());
-        }
-        setSizingLoading(true);
-        setView("size-result");
-        await submitSizing();
-      }, children: [
-        t("Get My Size"),
-        " ",
-        /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        mode === "exact" && profiles.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-profile-bar", children: /* @__PURE__ */ jsxs("select", { className: "ps-tryon-sf-profile-select", value: activeProfileId || "", onChange: (e) => {
+          if (e.target.value) applyProfile(e.target.value);
+        }, children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: t("Load saved profile...") }),
+          profiles.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-fields", children: mode === "quick" ? renderQuickFields() : renderExactFields() }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-sf-switch", children: mode === "quick" && exactAvailable ? /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sf-switch-btn", onClick: () => {
+          setMode("exact");
+          setSizingMethod("exact");
+        }, children: [
+          t("I know my measurements"),
+          " ",
+          /* @__PURE__ */ jsx(ArrowRightIcon, {})
+        ] }) : mode === "exact" ? /* @__PURE__ */ jsx("button", { className: "ps-tryon-sf-switch-btn", onClick: () => {
+          setMode("quick");
+          setSizingMethod("quick");
+        }, children: t("Not sure? Use height & weight instead") }) : null }),
+        /* @__PURE__ */ jsx("button", { className: "ps-tryon-sf-next", onClick: handleSubmit, children: t("Next") })
       ] })
-    ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
+    ] });
+  }
+  function SizingFormView() {
+    useEffect(() => {
+      setView("sizing-choice");
+    }, []);
+    return null;
   }
   function SizeResultView() {
     const unitLbl = sizingUnit === "cm" ? t("cm") : t("in");
@@ -2046,30 +1926,31 @@ const STYLES = `
   .ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
 
   /* Welcome */
-  .ps-tryon-welcome { text-align: center; }
-  .ps-tryon-welcome-hero { margin-bottom: 1.04vw; }
+  .ps-tryon-welcome { text-align: center; padding: clamp(8px, 0.5vw, 12px) 0; }
+  .ps-tryon-welcome-hero { margin-bottom: clamp(16px, 1.3vw, 24px); }
   .ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
-  .ps-tryon-welcome-product { width: 6.25vw; height: 7.3vw; object-fit: cover; border-radius: 0.73vw; border: 2px solid #333; }
-  .ps-tryon-welcome-sparkle { position: absolute; top: -0.42vw; right: -0.42vw; width: 1.46vw; height: 1.46vw; background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
-  .ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.73vw; height: 0.73vw; }
-  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.31vw); } }
-  .ps-tryon-welcome-title { font-size: 1.04vw; font-weight: 700; color: #fff; margin: 0.73vw 0 0.21vw; }
-  .ps-tryon-welcome-sub { font-size: 0.68vw; color: #999; margin: 0; }
-  .ps-tryon-features { display: flex; gap: 0.52vw; margin: 1.04vw 0; }
-  .ps-tryon-feature { flex: 1; padding: 0.73vw 0.52vw; border: 1px solid #333; border-radius: 0.63vw; text-align: center; }
-  .ps-tryon-feature-icon { margin-bottom: 0.31vw; color: #bb945c; display: flex; justify-content: center; }
-  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; }
-  .ps-tryon-feature-title { font-size: 0.63vw; font-weight: 600; color: #fff; margin-bottom: 2px; }
-  .ps-tryon-feature-desc { font-size: 0.52vw; color: #999; }
+  .ps-tryon-welcome-product { width: clamp(100px, 9vw, 160px); height: clamp(120px, 10.5vw, 190px); object-fit: cover; border-radius: clamp(10px, 0.9vw, 16px); border: 2px solid #333; box-shadow: 0 8px 30px rgba(0,0,0,0.4); }
+  .ps-tryon-welcome-sparkle { position: absolute; top: clamp(-6px, -0.5vw, -4px); right: clamp(-6px, -0.5vw, -4px); width: clamp(22px, 1.8vw, 30px); height: clamp(22px, 1.8vw, 30px); background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
+  .ps-tryon-welcome-sparkle svg { stroke: #111; width: clamp(10px, 0.9vw, 14px); height: clamp(10px, 0.9vw, 14px); }
+  @keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
+  .ps-tryon-welcome-title { font-size: clamp(18px, 1.4vw, 24px); font-weight: 700; color: #fff; margin: clamp(12px, 1vw, 18px) 0 clamp(4px, 0.3vw, 6px); letter-spacing: -0.01em; }
+  .ps-tryon-welcome-sub { font-size: clamp(13px, 0.9vw, 16px); color: #999; margin: 0; }
+  .ps-tryon-features { display: flex; gap: clamp(8px, 0.7vw, 12px); margin: clamp(16px, 1.3vw, 24px) 0; }
+  .ps-tryon-feature { flex: 1; padding: clamp(14px, 1vw, 18px) clamp(10px, 0.7vw, 14px); border: 1px solid #333; border-radius: clamp(10px, 0.8vw, 14px); text-align: center; transition: border-color 0.2s; }
+  .ps-tryon-feature:hover { border-color: #555; }
+  .ps-tryon-feature-icon { margin-bottom: clamp(6px, 0.4vw, 8px); color: #bb945c; display: flex; justify-content: center; }
+  .ps-tryon-feature-icon svg { stroke: currentColor; fill: none; width: clamp(18px, 1.2vw, 22px); height: clamp(18px, 1.2vw, 22px); }
+  .ps-tryon-feature-title { font-size: clamp(13px, 0.85vw, 15px); font-weight: 600; color: #fff; margin-bottom: 2px; }
+  .ps-tryon-feature-desc { font-size: clamp(11px, 0.7vw, 13px); color: #999; }
   .ps-tryon-cta {
-    width: 100%; padding: 0.73vw; background: #bb945c; color: #111; border: none;
-    border-radius: 0.63vw; font-size: 0.78vw; font-weight: 700; cursor: pointer;
-    display: flex; align-items: center; justify-content: center; gap: 0.42vw; transition: all 0.2s;
+    width: 100%; padding: clamp(14px, 1vw, 18px); background: #bb945c; color: #111; border: none;
+    border-radius: clamp(10px, 0.8vw, 14px); font-size: clamp(14px, 1vw, 17px); font-weight: 700; cursor: pointer;
+    display: flex; align-items: center; justify-content: center; gap: clamp(6px, 0.5vw, 10px); transition: all 0.2s;
     font-family: var(--ps-modal-font, system-ui, sans-serif);
   }
   .ps-tryon-cta:hover { background: #a07d4e; transform: translateY(-1px); }
   .ps-tryon-cta svg { stroke: #111; }
-  .ps-tryon-welcome-note { font-size: 0.57vw; color: #666; margin-top: 0.63vw; }
+  .ps-tryon-welcome-note { font-size: clamp(11px, 0.7vw, 13px); color: #666; margin-top: clamp(10px, 0.7vw, 14px); }
 
   /* Upload */
   .ps-tryon-upload {
@@ -2121,59 +2002,128 @@ const STYLES = `
   }
   .ps-tryon-profile-select:focus { border-color: #bb945c; }
 
-  /* Sizing choice */
-  .ps-tryon-sizing-choice { text-align: center; }
-  .ps-tryon-section-title { font-size: 0.83vw; font-weight: 600; color: #fff; margin: 0 0 0.83vw; }
-  .ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 0.52vw; }
-  .ps-tryon-choice-card {
-    display: flex; align-items: center; gap: 0.73vw; padding: 0.83vw;
-    border: 1.5px solid #333; border-radius: 0.63vw;
-    background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
-    width: 100%; font-family: inherit; position: relative; overflow: hidden;
-  }
-  .ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 0.31vw 1.04vw 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-info { flex: 1; min-width: 0; }
-  .ps-tryon-choice-title { font-size: 0.73vw; font-weight: 600; color: #fff; }
-  .ps-tryon-choice-desc { font-size: 0.63vw; color: #999; margin-top: 2px; }
-  .ps-tryon-choice-badge {
-    padding: 0.16vw 0.52vw; border-radius: 1.04vw; flex-shrink: 0;
-    background: rgba(187,148,92,0.12); color: #bb945c; font-size: 0.52vw; font-weight: 600;
-  }
-  .ps-tryon-sg-notice {
-    font-size: 0.68vw; color: #999; text-align: center; padding: 0.73vw 0.83vw;
-    margin-bottom: 0.73vw; border: 1px solid #333; border-radius: 0.63vw; background: #1a1b1a;
-    display: flex; flex-direction: column; align-items: center; gap: 0.57vw;
-  }
-  .ps-tryon-sg-notice-cta {
-    display: inline-flex; align-items: center; gap: 0.31vw;
-    padding: 0.42vw 1vw;
-    background: #bb945c; color: #111; border: none; border-radius: 0.42vw;
-    font-size: 0.68vw; font-weight: 700; cursor: pointer;
-    transition: all 0.2s; font-family: inherit;
+  /* Sizing — split layout (product image left, form right) */
+  .ps-tryon-sizing-split {
+    display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(16px, 1.5vw, 28px);
+    min-height: clamp(300px, 22vw, 500px);
+  }
+  .ps-tryon-sizing-img-col {
+    display: flex; align-items: stretch; justify-content: center;
+    background: #0e0e0f; border-radius: clamp(10px, 0.8vw, 14px); overflow: hidden;
   }
-  .ps-tryon-sg-notice-cta:hover { background: #a07d4e; }
-  .ps-tryon-sg-notice-cta svg { stroke: #111; }
-  .ps-tryon-sg-found svg { stroke: #4ade80; }
-  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.08vw 1.04vw; text-align: center; }
-  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: 0.83vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
+  .ps-tryon-sizing-product-img {
+    width: 100%; height: 100%; object-fit: cover; object-position: top;
+  }
+  .ps-tryon-sizing-form-col {
+    display: flex; flex-direction: column; justify-content: center;
+    padding: clamp(8px, 0.5vw, 14px) 0;
+  }
+  .ps-tryon-sf-title {
+    font-size: clamp(18px, 1.3vw, 24px); font-weight: 700; color: #fff;
+    margin: 0 0 clamp(14px, 1vw, 20px); letter-spacing: -0.01em;
+  }
+  .ps-tryon-sf-unit-tabs {
+    display: flex; border-bottom: 1.5px solid #333; margin-bottom: clamp(14px, 1vw, 20px);
+  }
+  .ps-tryon-sf-unit-tab {
+    background: none; border: none; padding: clamp(6px, 0.4vw, 10px) clamp(12px, 0.8vw, 16px);
+    font-size: clamp(12px, 0.8vw, 14px); font-weight: 600; color: #666; cursor: pointer;
+    font-family: inherit; transition: all 0.2s; border-bottom: 2px solid transparent;
+    margin-bottom: -1.5px;
+  }
+  .ps-tryon-sf-unit-tab:hover { color: #999; }
+  .ps-tryon-sf-unit-tab.ps-active { color: #fff; border-bottom-color: #bb945c; }
+
+  .ps-tryon-sf-profile-bar { margin-bottom: clamp(10px, 0.7vw, 14px); }
+  .ps-tryon-sf-profile-select {
+    width: 100%; padding: clamp(6px, 0.4vw, 8px); background: #1a1b1a; color: #ccc;
+    border: 1px solid #333; border-radius: clamp(6px, 0.4vw, 8px);
+    font-size: clamp(11px, 0.75vw, 13px); font-family: inherit; cursor: pointer;
+  }
+
+  .ps-tryon-sf-fields {
+    display: flex; flex-direction: column; gap: clamp(16px, 1.1vw, 22px);
+    flex: 1;
+  }
+  .ps-tryon-sf-row {
+    display: flex; align-items: center; justify-content: space-between;
+    border-bottom: 1px solid #2a2a2a; padding-bottom: clamp(10px, 0.7vw, 14px);
+  }
+  .ps-tryon-sf-label {
+    font-size: clamp(12px, 0.85vw, 15px); font-weight: 600; color: #ccc;
+    letter-spacing: 0.04em; flex-shrink: 0;
+  }
+  .ps-tryon-sf-input-wrap { flex: 1; display: flex; justify-content: flex-end; }
+  .ps-tryon-sf-inline { display: flex; align-items: center; gap: clamp(6px, 0.4vw, 10px); }
+  .ps-tryon-sf-ft-group { display: flex; align-items: center; gap: clamp(4px, 0.3vw, 8px); }
+  .ps-tryon-sf-input {
+    background: transparent; border: none; border-bottom: 1.5px solid #444;
+    color: #fff; font-size: clamp(14px, 1vw, 17px); font-family: inherit;
+    padding: clamp(4px, 0.3vw, 6px) 0; width: clamp(50px, 4vw, 80px);
+    text-align: center; outline: none; transition: border-color 0.2s;
+  }
+  .ps-tryon-sf-input:focus { border-bottom-color: #bb945c; }
+  .ps-tryon-sf-input::placeholder { color: #555; }
+  .ps-tryon-sf-input::-webkit-outer-spin-button,
+  .ps-tryon-sf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+  .ps-tryon-sf-unit {
+    font-size: clamp(11px, 0.75vw, 13px); color: #666; font-weight: 500;
+  }
+
+  .ps-tryon-sf-optional { margin-top: clamp(4px, 0.3vw, 6px); }
+  .ps-tryon-sf-optional-toggle {
+    font-size: clamp(11px, 0.75vw, 13px); color: #666; cursor: pointer;
+    font-family: inherit; list-style: none;
+  }
+  .ps-tryon-sf-optional-toggle:hover { color: #999; }
+  .ps-tryon-sf-optional-toggle::-webkit-details-marker { display: none; }
+  .ps-tryon-sf-optional-fields { display: flex; flex-direction: column; gap: clamp(12px, 0.8vw, 16px); padding-top: clamp(10px, 0.7vw, 14px); }
+
+  .ps-tryon-sf-switch { margin-top: clamp(12px, 0.8vw, 16px); text-align: center; }
+  .ps-tryon-sf-switch-btn {
+    background: none; border: none; color: #bb945c; font-size: clamp(12px, 0.8vw, 14px);
+    font-weight: 600; cursor: pointer; font-family: inherit;
+    display: inline-flex; align-items: center; gap: clamp(4px, 0.3vw, 6px);
+    transition: color 0.2s;
+  }
+  .ps-tryon-sf-switch-btn:hover { color: #d6ba7d; }
+  .ps-tryon-sf-switch-btn svg { stroke: currentColor; width: clamp(12px, 0.8vw, 14px); height: clamp(12px, 0.8vw, 14px); }
+
+  .ps-tryon-sf-next {
+    margin-top: clamp(14px, 1vw, 20px); align-self: flex-end;
+    padding: clamp(10px, 0.7vw, 14px) clamp(28px, 2vw, 40px);
+    background: #bb945c; color: #111; border: none;
+    border-radius: clamp(8px, 0.6vw, 12px); font-size: clamp(14px, 0.95vw, 16px);
+    font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit;
+  }
+  .ps-tryon-sf-next:hover { background: #a07d4e; transform: translateY(-1px); }
+
+  /* Mobile: stack vertically */
+  @media (max-width: 600px) {
+    .ps-tryon-sizing-split { grid-template-columns: 1fr; }
+    .ps-tryon-sizing-img-col { max-height: 200px; }
+    .ps-tryon-sf-next { width: 100%; text-align: center; display: flex; justify-content: center; }
+  }
+
+  /* Keep old class names for backwards compat */
+  .ps-tryon-section-title { font-size: clamp(14px, 0.95vw, 18px); font-weight: 600; color: #fff; margin: 0 0 clamp(12px, 0.8vw, 16px); }
+  .ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: clamp(30px, 2.5vw, 50px) clamp(15px, 1vw, 25px); text-align: center; }
+  .ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: clamp(12px, 0.8vw, 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: 9.4vw; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 1.04vw; }
+  .ps-tryon-sg-checking-bar-wrap { width: clamp(120px, 9vw, 180px); height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: clamp(14px, 1vw, 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: 0.31vw; }
-  .ps-tryon-sg-checking-sub { font-size: 0.68vw; color: #999; margin: 0; }
+  .ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: clamp(4px, 0.3vw, 6px); }
+  .ps-tryon-sg-checking-sub { font-size: clamp(11px, 0.75vw, 13px); color: #999; margin: 0; }
 
   /* Back button */
-  .ps-tryon-back { display: flex; align-items: center; gap: 0.31vw; background: none; border: none; color: #999; font-size: 0.68vw; cursor: pointer; padding: 0; margin-bottom: 0.63vw; font-family: inherit; transition: color 0.2s; }
+  .ps-tryon-back { display: flex; align-items: center; gap: clamp(4px, 0.3vw, 6px); background: none; border: none; color: #999; font-size: clamp(12px, 0.8vw, 14px); cursor: pointer; padding: 0; margin-bottom: clamp(10px, 0.7vw, 14px); 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: 0.63vw; }
+  /* Sizing form (legacy — redirect to split view) */
+  .ps-tryon-sizing-form { display: flex; flex-direction: column; gap: clamp(10px, 0.7vw, 14px); }
   .ps-tryon-input-row { display: flex; align-items: center; gap: 0.52vw; }
   .ps-tryon-input-row label { font-size: 0.68vw; font-weight: 500; color: #ccc; min-width: 4.7vw; flex-shrink: 0; }
   .ps-tryon-input-row input {

package/package.json

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