@primestyleai/tryon 5.8.21 → 5.8.22

package/dist/react/index.js

@@ -847,7 +847,7 @@ const STYLES = `
   }
   .ps-tryon-sizing-product-img { opacity: 1; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
   .ps-tryon-sizing-product-img.ps-tryon-img-hidden { opacity: 0.08; }
-  .ps-tryon-sizing-measure-img { position: absolute; inset: 0; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }
+  .ps-tryon-sizing-measure-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }
   .ps-tryon-sizing-measure-img.ps-tryon-img-visible { opacity: 1; }
   .ps-tryon-sizing-height-img { position: absolute; inset: 0; object-fit: contain !important; background: #f5f5f5; opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; will-change: opacity; }
   .ps-tryon-sizing-height-img.ps-tryon-img-visible { opacity: 1; }
@@ -1153,8 +1153,8 @@ const STYLES = `
     min-height: 5vw; padding: 0.4vw; max-height: 8vw;
   }
   .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-bg {
-    max-height: 8vw; width: 100%;
-    object-fit: cover; object-position: center top;
+    max-height: 8vw; width: 100%; height: 100%;
+    object-fit: contain; object-position: center center;
   }
   .ps-tryon-sr-cards-stack .ps-tryon-sec-bigcard-overlay {
     height: 100%;
@@ -2398,8 +2398,8 @@ const STYLES = `
 
   /* Image */
   .ps-tryon-sec-bigcard-bg {
-    width: 100%; max-height: 20vw; display: block;
-    object-fit: cover; object-position: center top;
+    width: 100%; height: 100%; max-height: 20vw; display: block;
+    object-fit: contain; object-position: center center;
     border-radius: 0.7vw 0.7vw 0 0;
     transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   }
@@ -3115,7 +3115,9 @@ const STYLES = `
     display: flex;
   }
   .ps-bp-image-img {
-    width: 100%; height: 100%; object-fit: cover; object-position: center top; flex: 1;
+    width: 100%; height: 100%;
+    object-fit: contain; object-position: center center;
+    flex: 1;
   }
   /* Upload zone — same element as .ps-bp-image, dashed border + centered content, full height */
   .ps-bp-image.ps-bp-upload-zone {
@@ -4740,6 +4742,141 @@ const STYLES = `
     .ps-cpw-footer { flex-direction: column-reverse; gap: 10px; align-items: stretch; }
     .ps-cpw-next-btn { width: 100%; padding: 14px; }
     .ps-cpw-back-btn { text-align: center; }
+    .ps-cpw-method-grid { grid-template-columns: 1fr; }
+    .ps-cpw-method-card { padding: 22px 18px; }
+    .ps-cpw-photo-frame { max-width: 100%; height: 320px; }
+  }
+
+  /* ── Progressive (one-question-at-a-time) flow ── */
+  .ps-cpw-progressive {
+    display: flex; flex-direction: column; gap: 16px;
+    padding: 8px 0;
+  }
+  .ps-cpw-fade-in {
+    animation: ps-cpw-fade-up 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+  @keyframes ps-cpw-fade-up {
+    from { opacity: 0; transform: translateY(12px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  /* ── Method picker (initial step) ── */
+  .ps-cpw-method-picker {
+    display: flex; flex-direction: column; align-items: center;
+    gap: 24px; padding: 16px 0;
+  }
+  .ps-cpw-method-intro {
+    font-size: 14px; color: var(--ps-text-muted);
+    text-align: center; margin: 0;
+    max-width: 480px;
+  }
+  .ps-cpw-method-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    width: 100%;
+  }
+  .ps-cpw-method-card {
+    display: flex; flex-direction: column; align-items: flex-start;
+    gap: 14px;
+    padding: 28px 24px;
+    background: var(--ps-bg-primary);
+    border: 2px solid var(--ps-border-subtle);
+    border-radius: 14px;
+    cursor: pointer; font-family: inherit; text-align: left;
+    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
+  }
+  .ps-cpw-method-card:hover {
+    border-color: var(--ps-accent);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(33, 84, 239, 0.12);
+  }
+  .ps-cpw-method-icon {
+    width: 56px; height: 56px;
+    border-radius: 14px;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(33, 84, 239, 0.08);
+    color: var(--ps-accent);
+  }
+  .ps-cpw-method-title {
+    font-size: 16px; font-weight: 700;
+    color: var(--ps-text-primary);
+    letter-spacing: -0.01em;
+  }
+  .ps-cpw-method-desc {
+    font-size: 12.5px; line-height: 1.55;
+    color: var(--ps-text-muted);
+  }
+
+  /* ── Image-path photo step ── */
+  .ps-cpw-photo-step {
+    display: flex; flex-direction: column; align-items: stretch;
+    gap: 16px; padding: 8px 0 24px;
+  }
+  .ps-cpw-photo-step-title {
+    font-size: 18px; font-weight: 700; margin: 0;
+    color: var(--ps-text-primary);
+  }
+  .ps-cpw-photo-step-sub {
+    font-size: 13px; line-height: 1.6;
+    color: var(--ps-text-muted); margin: 0;
+  }
+  .ps-cpw-photo-dropzone {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 10px;
+    width: 100%;
+    min-height: 360px;
+    padding: 24px;
+    border: 2px dashed var(--ps-border-color);
+    border-radius: 14px;
+    background: var(--ps-bg-secondary);
+    color: var(--ps-text-muted);
+    cursor: pointer; font-family: inherit;
+    transition: border-color 0.18s, background 0.18s;
+  }
+  .ps-cpw-photo-dropzone:hover { border-color: var(--ps-accent); background: rgba(33, 84, 239, 0.04); }
+  .ps-cpw-photo-dropzone:disabled { opacity: 0.6; cursor: default; }
+  .ps-cpw-photo-dropzone-title {
+    font-size: 14px; font-weight: 600; color: var(--ps-text-primary);
+  }
+  .ps-cpw-photo-dropzone-hint {
+    font-size: 11px; color: var(--ps-text-muted);
+  }
+  .ps-cpw-photo-frame {
+    position: relative;
+    width: 100%;
+    height: 480px;
+    background: var(--ps-bg-secondary);
+    border-radius: 14px;
+    overflow: hidden;
+    border: 1px solid var(--ps-border-subtle);
+  }
+  .ps-cpw-photo-frame-img {
+    width: 100%; height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+  .ps-cpw-photo-retake {
+    align-self: center;
+    padding: 12px 24px;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--ps-accent);
+    border: 2px solid var(--ps-accent);
+    font-weight: 700; font-size: 12px;
+    text-transform: uppercase; letter-spacing: 0.08em;
+    cursor: pointer; font-family: inherit;
+    transition: background 0.18s;
+  }
+  .ps-cpw-photo-retake:hover { background: rgba(33, 84, 239, 0.08); }
+  .ps-cpw-hint {
+    font-size: 12.5px; line-height: 1.6;
+    color: var(--ps-text-muted);
+    margin: 8px 0 0;
+    padding: 12px 14px;
+    background: rgba(33, 84, 239, 0.05);
+    border-left: 3px solid var(--ps-accent);
+    border-radius: 6px;
   }
 
   /* ════════════════════════════════════════════════════════════════
@@ -8437,25 +8574,28 @@ function ShapeCard({
     }
   );
 }
-function ShapeSection({
+function ProgressiveStep({
+  stepKey,
   title,
   subtitle,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "ps-cpw-section", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "ps-cpw-progressive ps-cpw-fade-in", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-cpw-section-head", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-cpw-section-title", children: title }),
       /* @__PURE__ */ jsx("div", { className: "ps-cpw-section-sub", children: subtitle })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "ps-cpw-card-row", children })
-  ] });
+  ] }, stepKey);
 }
 function CreateProfileWizard({ onSave, onCancel, t }) {
-  const [step, setStep] = useState(1);
+  const [mode, setMode] = useState(null);
+  const [manualStep, setManualStep] = useState("identity");
+  const [imageStep, setImageStep] = useState("name");
   const bodyScrollRef = useRef(null);
   useEffect(() => {
     if (bodyScrollRef.current) bodyScrollRef.current.scrollTop = 0;
-  }, [step]);
+  }, [mode, manualStep, imageStep]);
   const [name, setName] = useState("");
   const [gender, setGender] = useState("male");
   const [unit, setUnit] = useState("cm");
@@ -8502,7 +8642,11 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
   const CUP_OPTIONS_US = ["AA", "A", "B", "C", "D", "DD/E", "DDD/F", "G", "H", "I", "J"];
   const isWomen = gender === "female";
   const imgs = isWomen ? BODY_IMAGES.female : BODY_IMAGES.male;
-  const validateStep1 = () => {
+  const manualStepOrder = isWomen ? ["identity", "stomach", "seat", "hips", "bra"] : ["identity", "chest", "stomach", "seat"];
+  const manualStepIdx = manualStepOrder.indexOf(manualStep);
+  const manualStepCount = manualStepOrder.length;
+  const isLastManualStep = manualStepIdx === manualStepCount - 1;
+  const validateIdentity = () => {
     if (!name.trim()) {
       setError(t("Please enter a profile name"));
       return false;
@@ -8525,52 +8669,141 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
     setError("");
     return true;
   };
-  const handleContinue = () => {
-    if (step === 1) {
-      if (!validateStep1()) return;
-      setStep(2);
-      return;
+  const validateNameOnly = () => {
+    if (!name.trim()) {
+      setError(t("Please enter a profile name"));
+      return false;
     }
-    const data = {
+    setError("");
+    return true;
+  };
+  const buildManualPayload = () => ({
+    name: name.trim(),
+    gender,
+    sizingUnit: unit,
+    heightUnit: unit,
+    weightUnit: unit === "in" ? "lbs" : "kg",
+    heightCm: parseFloat(heightVal),
+    weightKg: parseFloat(weightVal),
+    height: parseFloat(heightVal),
+    weight: parseFloat(weightVal),
+    age: parseFloat(ageVal),
+    chestProfile: chestProfile || void 0,
+    midsectionProfile: midsectionProfile || void 0,
+    hipProfile: isWomen ? hipProfile || void 0 : seatProfile || void 0,
+    bandSize: isWomen ? bandSize || void 0 : void 0,
+    cupSize: isWomen ? cupSize || void 0 : void 0
+  });
+  const buildImagePayload = () => {
+    const h = parseFloat(heightVal);
+    const w = parseFloat(weightVal);
+    const a = parseFloat(ageVal);
+    return {
       name: name.trim(),
       gender,
       sizingUnit: unit,
       heightUnit: unit,
       weightUnit: unit === "in" ? "lbs" : "kg",
-      // Legacy keys (kept for backward compat with the existing storage)
-      heightCm: parseFloat(heightVal),
-      weightKg: parseFloat(weightVal),
-      // New canonical keys
-      height: parseFloat(heightVal),
-      weight: parseFloat(weightVal),
-      age: parseFloat(ageVal),
-      chestProfile: chestProfile || void 0,
-      midsectionProfile: midsectionProfile || void 0,
-      hipProfile: isWomen ? hipProfile || void 0 : seatProfile || void 0,
-      bandSize: isWomen ? bandSize || void 0 : void 0,
-      cupSize: isWomen ? cupSize || void 0 : void 0,
+      ...h > 0 ? { heightCm: h, height: h } : {},
+      ...w > 0 ? { weightKg: w, weight: w } : {},
+      ...a > 0 ? { age: a } : {},
       photoBase64: photoBase64 || void 0
     };
-    onSave(data);
+  };
+  const advanceManual = () => {
+    if (manualStep === "identity") {
+      if (!validateIdentity()) return;
+    }
+    if (manualStep === "chest" && !chestProfile) {
+      setError(t("Please pick an option"));
+      return;
+    }
+    if (manualStep === "stomach" && !midsectionProfile) {
+      setError(t("Please pick an option"));
+      return;
+    }
+    if (manualStep === "seat" && !seatProfile) {
+      setError(t("Please pick an option"));
+      return;
+    }
+    if (manualStep === "hips" && !hipProfile) {
+      setError(t("Please pick an option"));
+      return;
+    }
+    if (manualStep === "bra" && (!bandSize || !cupSize)) {
+      setError(t("Please pick band and cup size"));
+      return;
+    }
+    setError("");
+    if (isLastManualStep) {
+      onSave(buildManualPayload());
+      return;
+    }
+    setManualStep(manualStepOrder[manualStepIdx + 1]);
+  };
+  const goBackManual = () => {
+    setError("");
+    if (manualStep === "identity") {
+      setMode(null);
+      return;
+    }
+    setManualStep(manualStepOrder[Math.max(0, manualStepIdx - 1)]);
+  };
+  const advanceImage = () => {
+    if (imageStep === "name") {
+      if (!validateNameOnly()) return;
+      setImageStep("photo");
+      return;
+    }
+    if (!photoBase64) {
+      setError(t("Please upload a photo"));
+      return;
+    }
+    setError("");
+    onSave(buildImagePayload());
+  };
+  const goBackImage = () => {
+    setError("");
+    if (imageStep === "name") {
+      setMode(null);
+      return;
+    }
+    setImageStep("name");
   };
   const handleBack = () => {
-    if (step === 2) setStep(1);
-    else onCancel();
+    if (mode === "manual") return goBackManual();
+    if (mode === "image") return goBackImage();
+    onCancel();
   };
-  const progressPct = step === 1 ? 50 : 100;
+  const headerLabel = (() => {
+    if (mode == null) return t("CHOOSE A METHOD");
+    if (mode === "manual") {
+      const labels = {
+        identity: t("Identity"),
+        chest: t("Chest Profile"),
+        stomach: t("Stomach Profile"),
+        seat: t("Back & Seat"),
+        hips: t("Hip Profile"),
+        bra: t("Bra Size")
+      };
+      return `${t("Step")} ${String(manualStepIdx + 1).padStart(2, "0")} — ${labels[manualStep]}`;
+    }
+    const idx = imageStep === "name" ? 1 : 2;
+    const label = imageStep === "name" ? t("Profile") : t("Upload Photo");
+    return `${t("Step")} ${String(idx).padStart(2, "0")} — ${label}`;
+  })();
+  const progressPct = (() => {
+    if (mode == null) return 0;
+    if (mode === "manual") return Math.round((manualStepIdx + 1) / manualStepCount * 100);
+    return imageStep === "name" ? 50 : 100;
+  })();
   return /* @__PURE__ */ jsxs("div", { className: "ps-cpw-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "ps-cpw-step-head", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "ps-cpw-eyebrow", children: t("CREATE PROFILE") }),
-        /* @__PURE__ */ jsxs("h2", { className: "ps-cpw-step-title", children: [
-          t("Step"),
-          " ",
-          String(step).padStart(2, "0"),
-          " — ",
-          step === 1 ? t("Identity") : t("Silhouette")
-        ] })
+        /* @__PURE__ */ jsx("h2", { className: "ps-cpw-step-title", children: headerLabel })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-cpw-progress", children: [
+      mode != null && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-progress", children: [
         /* @__PURE__ */ jsx("div", { className: "ps-cpw-progress-track", children: /* @__PURE__ */ jsx("div", { className: "ps-cpw-progress-fill", style: { width: `${progressPct}%` } }) }),
         /* @__PURE__ */ jsxs("span", { className: "ps-cpw-progress-label", children: [
           progressPct,
@@ -8579,197 +8812,236 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-cpw-body", ref: bodyScrollRef, children: step === 1 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-identity", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-row", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "male" ? " ps-active" : ""}`, onClick: () => setGender("male"), children: t("Male") }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "female" ? " ps-active" : ""}`, onClick: () => setGender("female"), children: t("Female") })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${unit === "cm" ? " ps-active" : ""}`, onClick: () => setUnit("cm"), children: "cm" }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${unit === "in" ? " ps-active" : ""}`, onClick: () => setUnit("in"), children: "in" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
-        /* @__PURE__ */ jsx("label", { className: "ps-cpw-field-label", children: t("PROFILE NAME") }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "text",
-            className: "ps-cpw-input",
-            value: name,
-            placeholder: t("e.g. My Measurements"),
-            onChange: (e) => {
-              setName(e.target.value);
-              setError("");
+    /* @__PURE__ */ jsxs("div", { className: "ps-cpw-body", ref: bodyScrollRef, children: [
+      mode == null && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-method-picker ps-cpw-fade-in", children: [
+        /* @__PURE__ */ jsx("p", { className: "ps-cpw-method-intro", children: t("How would you like us to find your size?") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-method-grid", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ps-cpw-method-card",
+              onClick: () => {
+                setMode("manual");
+                setManualStep("identity");
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "32", height: "32", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M3 7h18M3 12h18M3 17h18" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "6", cy: "7", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "14", cy: "12", r: "1", fill: "currentColor" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "17", r: "1", fill: "currentColor" })
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-title", children: t("Measure manually") }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Enter height, weight and answer a few quick body shape questions.") })
+              ]
             }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-cpw-split", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-split-left", children: [
-          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
-            /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
-              t("HEIGHT"),
-              " (",
-              unit,
-              ")"
-            ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-cpw-input",
-                value: heightVal,
-                placeholder: unit === "cm" ? t("e.g. 173") : t("e.g. 68 in"),
-                onChange: (e) => {
-                  setHeightVal(e.target.value);
-                  setError("");
-                }
-              }
-            )
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "ps-cpw-method-card",
+              onClick: () => {
+                setMode("image");
+                setImageStep("name");
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "32", height: "32", 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" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "4" })
+                ] }) }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-title", children: t("Analyze by photo") }),
+                /* @__PURE__ */ jsx("div", { className: "ps-cpw-method-desc", children: t("Upload a full-body photo and our AI will calculate every measurement automatically.") })
+              ]
+            }
+          )
+        ] })
+      ] }, "method-picker"),
+      mode === "manual" && manualStep === "identity" && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-identity ps-cpw-fade-in", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-row", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "male" ? " ps-active" : ""}`, onClick: () => setGender("male"), children: t("Male") }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "female" ? " ps-active" : ""}`, onClick: () => setGender("female"), children: t("Female") })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
-            /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
-              t("WEIGHT"),
-              " (",
-              unit === "in" ? "lbs" : "kg",
-              ")"
-            ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-cpw-input",
-                value: weightVal,
-                placeholder: unit === "in" ? t("e.g. 154") : t("e.g. 70"),
-                onChange: (e) => {
-                  setWeightVal(e.target.value);
-                  setError("");
-                }
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${unit === "cm" ? " ps-active" : ""}`, onClick: () => setUnit("cm"), children: "cm" }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${unit === "in" ? " ps-active" : ""}`, onClick: () => setUnit("in"), children: "in" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "ps-cpw-field-label", children: t("PROFILE NAME") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: "ps-cpw-input",
+              value: name,
+              placeholder: t("e.g. My Measurements"),
+              onChange: (e) => {
+                setName(e.target.value);
+                setError("");
               }
-            )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
+            t("HEIGHT"),
+            " (",
+            unit,
+            ")"
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
-            /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
-              t("AGE"),
-              " (",
-              t("years"),
-              ")"
-            ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "numeric",
-                className: "ps-cpw-input",
-                value: ageVal,
-                placeholder: t("e.g. 30"),
-                onChange: (e) => {
-                  setAgeVal(e.target.value);
-                  setError("");
-                }
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              inputMode: "numeric",
+              className: "ps-cpw-input",
+              value: heightVal,
+              placeholder: unit === "cm" ? t("e.g. 173") : t("e.g. 68 in"),
+              onChange: (e) => {
+                setHeightVal(e.target.value);
+                setError("");
               }
-            )
-          ] })
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-split-right", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-cpw-field-label", children: t("PROFILE PHOTO (OPTIONAL)") }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
+            t("WEIGHT"),
+            " (",
+            unit === "in" ? "lbs" : "kg",
+            ")"
+          ] }),
           /* @__PURE__ */ jsx(
             "input",
             {
-              ref: photoInputRef,
-              type: "file",
-              accept: "image/*",
-              onChange: handlePhotoSelect,
-              style: { display: "none" }
-            }
-          ),
-          photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-preview", children: [
-            /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo") }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "ps-cpw-photo-remove",
-                onClick: handleRemovePhoto,
-                "aria-label": t("Remove photo"),
-                children: "×"
+              type: "number",
+              inputMode: "numeric",
+              className: "ps-cpw-input",
+              value: weightVal,
+              placeholder: unit === "in" ? t("e.g. 154") : t("e.g. 70"),
+              onChange: (e) => {
+                setWeightVal(e.target.value);
+                setError("");
               }
-            )
-          ] }) : /* @__PURE__ */ jsxs(
-            "button",
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+          /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
+            t("AGE"),
+            " (",
+            t("years"),
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
             {
-              type: "button",
-              className: "ps-cpw-photo-upload",
-              onClick: () => photoInputRef.current?.click(),
-              disabled: photoUploading,
-              children: [
-                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "22", height: "22", children: [
-                  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                  /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
-                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-upload-title", children: photoUploading ? t("Uploading...") : t("Upload a photo") }),
-                /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-upload-hint", children: t("Helps refine your AI sizing — JPEG, PNG up to 10MB") })
-              ]
+              type: "number",
+              inputMode: "numeric",
+              className: "ps-cpw-input",
+              value: ageVal,
+              placeholder: t("e.g. 30"),
+              onChange: (e) => {
+                setAgeVal(e.target.value);
+                setError("");
+              }
             }
           )
-        ] })
-      ] }),
-      error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
-    ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-cpw-silhouette", children: [
-      !isWomen && /* @__PURE__ */ jsxs(
-        ShapeSection,
+        ] }),
+        error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
+      ] }, "manual-identity"),
+      mode === "manual" && manualStep === "chest" && !isWomen && /* @__PURE__ */ jsxs(
+        ProgressiveStep,
         {
+          stepKey: "chest",
           title: t("CHEST PROFILE"),
           subtitle: t("Select the profile that best matches your chest breadth"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.narrow ?? null, label: t("NARROW"), selected: chestProfile === "narrow", onSelect: () => setChestProfile("narrow") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.average ?? null, label: t("AVERAGE"), selected: chestProfile === "average", onSelect: () => setChestProfile("average") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.broad ?? null, label: t("BROAD"), selected: chestProfile === "broad", onSelect: () => setChestProfile("broad") })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.narrow ?? null, label: t("NARROW"), selected: chestProfile === "narrow", onSelect: () => {
+              setChestProfile("narrow");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.average ?? null, label: t("AVERAGE"), selected: chestProfile === "average", onSelect: () => {
+              setChestProfile("average");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.chest?.broad ?? null, label: t("BROAD"), selected: chestProfile === "broad", onSelect: () => {
+              setChestProfile("broad");
+              setError("");
+            } })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs(
-        ShapeSection,
+      mode === "manual" && manualStep === "stomach" && /* @__PURE__ */ jsxs(
+        ProgressiveStep,
         {
+          stepKey: "stomach",
           title: t("STOMACH PROFILE"),
           subtitle: t("Describe your mid-section silhouette"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.flat ?? null, label: t("FLAT"), selected: midsectionProfile === "flat", onSelect: () => setMidsectionProfile("flat") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.average ?? null, label: t("AVERAGE"), selected: midsectionProfile === "average", onSelect: () => setMidsectionProfile("average") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.round ?? null, label: t("ROUND"), selected: midsectionProfile === "round", onSelect: () => setMidsectionProfile("round") })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.flat ?? null, label: t("FLAT"), selected: midsectionProfile === "flat", onSelect: () => {
+              setMidsectionProfile("flat");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.average ?? null, label: t("AVERAGE"), selected: midsectionProfile === "average", onSelect: () => {
+              setMidsectionProfile("average");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.stomach?.round ?? null, label: t("ROUND"), selected: midsectionProfile === "round", onSelect: () => {
+              setMidsectionProfile("round");
+              setError("");
+            } })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs(
-        ShapeSection,
+      mode === "manual" && manualStep === "seat" && /* @__PURE__ */ jsxs(
+        ProgressiveStep,
         {
+          stepKey: "seat",
           title: t("BACK & SEAT"),
           subtitle: t("The curvature of your lower spine and seat profile"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.narrow ?? null, label: t("STRAIGHT"), selected: seatProfile === "narrow", onSelect: () => setSeatProfile("narrow") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.average ?? null, label: t("CURVED"), selected: seatProfile === "average", onSelect: () => setSeatProfile("average") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.full ?? null, label: t("DEEP"), selected: seatProfile === "full", onSelect: () => setSeatProfile("full") })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.narrow ?? null, label: t("STRAIGHT"), selected: seatProfile === "narrow", onSelect: () => {
+              setSeatProfile("narrow");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.average ?? null, label: t("CURVED"), selected: seatProfile === "average", onSelect: () => {
+              setSeatProfile("average");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.seat?.full ?? null, label: t("DEEP"), selected: seatProfile === "full", onSelect: () => {
+              setSeatProfile("full");
+              setError("");
+            } })
           ]
         }
       ),
-      isWomen && imgs.hips && /* @__PURE__ */ jsxs(
-        ShapeSection,
+      mode === "manual" && manualStep === "hips" && isWomen && imgs.hips && /* @__PURE__ */ jsxs(
+        ProgressiveStep,
         {
+          stepKey: "hips",
           title: t("HIP PROFILE"),
           subtitle: t("The curvature of your hips and thighs"),
           children: [
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.narrow ?? null, label: t("NARROW"), selected: hipProfile === "narrow", onSelect: () => setHipProfile("narrow") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.average ?? null, label: t("AVERAGE"), selected: hipProfile === "average", onSelect: () => setHipProfile("average") }),
-            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.full ?? null, label: t("FULL"), selected: hipProfile === "full", onSelect: () => setHipProfile("full") })
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.narrow ?? null, label: t("NARROW"), selected: hipProfile === "narrow", onSelect: () => {
+              setHipProfile("narrow");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.average ?? null, label: t("AVERAGE"), selected: hipProfile === "average", onSelect: () => {
+              setHipProfile("average");
+              setError("");
+            } }),
+            /* @__PURE__ */ jsx(ShapeCard, { img: imgs.hips.full ?? null, label: t("FULL"), selected: hipProfile === "full", onSelect: () => {
+              setHipProfile("full");
+              setError("");
+            } })
           ]
         }
       ),
-      isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-section", children: [
+      mode === "manual" && manualStep === "bra" && isWomen && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-progressive ps-cpw-fade-in", children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-cpw-section-head", children: [
           /* @__PURE__ */ jsx("div", { className: "ps-cpw-section-title", children: t("BRA SIZE") }),
           /* @__PURE__ */ jsx("div", { className: "ps-cpw-section-sub", children: t("Helps us refine bust measurements for tops and dresses") })
@@ -8782,7 +9054,10 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               {
                 className: "ps-cpw-input",
                 value: bandSize ?? "",
-                onChange: (e) => setBandSize(e.target.value || null),
+                onChange: (e) => {
+                  setBandSize(e.target.value || null);
+                  setError("");
+                },
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: t("Select") }),
                   BAND_OPTIONS_US.map((b) => /* @__PURE__ */ jsx("option", { value: b, children: b }, b))
@@ -8797,7 +9072,10 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               {
                 className: "ps-cpw-input",
                 value: cupSize ?? "",
-                onChange: (e) => setCupSize(e.target.value || null),
+                onChange: (e) => {
+                  setCupSize(e.target.value || null);
+                  setError("");
+                },
                 children: [
                   /* @__PURE__ */ jsx("option", { value: "", children: t("Select") }),
                   CUP_OPTIONS_US.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: c }, c))
@@ -8806,11 +9084,92 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
             )
           ] })
         ] })
-      ] })
-    ] }) }),
+      ] }, "bra"),
+      mode === "manual" && error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error }),
+      mode === "image" && imageStep === "name" && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-identity ps-cpw-fade-in", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-cpw-pill-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "male" ? " ps-active" : ""}`, onClick: () => setGender("male"), children: t("Male") }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "female" ? " ps-active" : ""}`, onClick: () => setGender("female"), children: t("Female") })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+          /* @__PURE__ */ jsx("label", { className: "ps-cpw-field-label", children: t("PROFILE NAME") }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: "ps-cpw-input",
+              value: name,
+              placeholder: t("e.g. My Photo Profile"),
+              onChange: (e) => {
+                setName(e.target.value);
+                setError("");
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "ps-cpw-hint", children: t("Next, upload a full-body photo. Our AI will analyze it and compute every measurement (chest, waist, hips, sleeve, inseam, etc.) automatically.") }),
+        error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
+      ] }, "image-name"),
+      mode === "image" && imageStep === "photo" && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-step ps-cpw-fade-in", children: [
+        /* @__PURE__ */ jsx("h3", { className: "ps-cpw-photo-step-title", children: t("Upload your photo") }),
+        /* @__PURE__ */ jsx("p", { className: "ps-cpw-photo-step-sub", children: t("Stand straight, full body in frame, neutral lighting. Form-fitting clothes give the most accurate result.") }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: photoInputRef,
+            type: "file",
+            accept: "image/jpeg,image/png,image/webp",
+            style: { display: "none" },
+            onChange: handlePhotoSelect
+          }
+        ),
+        photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-frame", children: [
+          /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo"), className: "ps-cpw-photo-frame-img" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ps-cpw-photo-remove",
+              onClick: handleRemovePhoto,
+              "aria-label": t("Remove photo"),
+              children: "×"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "ps-cpw-photo-dropzone",
+            onClick: () => photoInputRef.current?.click(),
+            disabled: photoUploading,
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "48", height: "48", children: [
+                /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-dropzone-title", children: photoUploading ? t("Processing...") : t("Tap to upload a photo") }),
+              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-dropzone-hint", children: t("JPEG, PNG up to 10MB") })
+            ]
+          }
+        ),
+        photoBase64 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ps-cpw-photo-retake",
+            onClick: () => photoInputRef.current?.click(),
+            disabled: photoUploading,
+            children: t("RETAKE PHOTO")
+          }
+        ),
+        error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
+      ] }, "image-photo")
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-cpw-footer", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-back-btn", onClick: handleBack, children: step === 1 ? t("Cancel") : `← ${t("Back to Identity")}` }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-next-btn", onClick: handleContinue, children: step === 1 ? t("Continue") : t("CALCULATE MY FIT") })
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-back-btn", onClick: handleBack, children: mode == null ? t("Cancel") : `← ${t("Back")}` }),
+      mode === "manual" && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-next-btn", onClick: advanceManual, children: isLastManualStep ? t("CALCULATE MY FIT") : t("Continue") }),
+      mode === "image" && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-cpw-next-btn", onClick: advanceImage, disabled: imageStep === "photo" && !photoBase64, children: imageStep === "name" ? t("Continue") : t("ANALYZE BY IMAGE") })
     ] })
   ] });
 }