@primestyleai/tryon 5.6.4 → 5.6.6

package/dist/react/index.js

@@ -549,7 +549,8 @@ const STYLES = `
     scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;
     flex-shrink: 0;
   }
-  .ps-tryon-modal-wide { max-width: 55vw; width: 55vw; height: 70vh; max-height: 70vh; display: flex; flex-direction: column; overflow: visible; }
+  .ps-tryon-modal-wide { max-width: 55vw; width: 55vw; height: 70vh; max-height: 70vh; display: flex; flex-direction: column; overflow: visible; transition: height 0.45s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
+  .ps-tryon-modal-tall.ps-tryon-modal-wide { height: 88vh; max-height: 88vh; }
   .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
   @keyframes ps-slide-up { from { transform: translateY(1.04vw) scale(0.97); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
 
@@ -3846,6 +3847,10 @@ const STYLES = `
     display: flex; align-items: center; justify-content: center;
     margin-bottom: 12px;
     color: var(--ps-text-secondary);
+    overflow: hidden;
+  }
+  .ps-msp-card-photo {
+    width: 100%; height: 100%; object-fit: cover; display: block;
   }
   .ps-msp-avatar {
     position: relative;
@@ -4110,7 +4115,7 @@ const STYLES = `
     outline: none;
     transition: border-color 0.15s;
   }
-  .ps-cpw-input::placeholder { color: var(--ps-border-color); font-weight: 400; }
+  .ps-cpw-input::placeholder { color: var(--ps-text-muted); font-weight: 500; opacity: 0.7; }
   .ps-cpw-input:focus { border-bottom-color: var(--ps-accent); }
   .ps-cpw-input::-webkit-outer-spin-button,
   .ps-cpw-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@@ -4143,12 +4148,80 @@ const STYLES = `
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 24px;
   }
+
+  /* Two-column split: inputs stacked left, photo right */
+  .ps-cpw-split {
+    display: grid;
+    grid-template-columns: 1fr 280px;
+    gap: 28px;
+    align-items: start;
+  }
+  .ps-cpw-split-left {
+    display: flex; flex-direction: column; gap: 22px;
+    min-width: 0;
+  }
+  .ps-cpw-split-right {
+    display: flex; flex-direction: column; gap: 8px;
+    min-width: 0;
+  }
   .ps-cpw-error {
     font-size: 12px;
     color: var(--ps-error-color);
     margin-top: -6px;
   }
 
+  /* Optional photo upload (step 1) */
+  .ps-cpw-photo {
+    display: flex; flex-direction: column; gap: 8px;
+    margin-top: 4px;
+  }
+  .ps-cpw-photo-upload {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 6px; padding: 22px;
+    background: var(--ps-bg-secondary);
+    border: 2px dashed var(--ps-border-color);
+    border-radius: 12px;
+    color: var(--ps-text-secondary); cursor: pointer;
+    font-family: inherit;
+    transition: border-color 0.15s, background 0.15s;
+  }
+  .ps-cpw-photo-upload:hover {
+    border-color: var(--ps-accent);
+    background: rgba(33, 84, 239, 0.04);
+  }
+  .ps-cpw-photo-upload:disabled { opacity: 0.5; cursor: wait; }
+  .ps-cpw-photo-upload svg { color: var(--ps-accent); }
+  .ps-cpw-photo-upload-title {
+    font-size: 13px; font-weight: 600;
+    color: var(--ps-text-primary);
+  }
+  .ps-cpw-photo-upload-hint {
+    font-size: 11px; font-weight: 400;
+    color: var(--ps-text-muted);
+  }
+  .ps-cpw-photo-preview {
+    position: relative;
+    width: 100%;
+    border-radius: 12px; overflow: hidden;
+    background: var(--ps-bg-secondary);
+    border: 1px solid var(--ps-border-subtle);
+    aspect-ratio: 3 / 4;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-cpw-photo-preview img {
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain;
+  }
+  .ps-cpw-photo-remove {
+    position: absolute; top: 8px; right: 8px;
+    width: 28px; height: 28px; border-radius: 50%;
+    background: rgba(0, 0, 0, 0.65); color: #FFFFFF;
+    border: none; cursor: pointer;
+    font-size: 18px; line-height: 1;
+    display: flex; align-items: center; justify-content: center;
+  }
+
   /* Step 2 — Silhouette */
   .ps-cpw-silhouette {
     display: flex; flex-direction: column; gap: 28px;
@@ -4247,6 +4320,8 @@ const STYLES = `
     .ps-cpw-progress { min-width: 0; width: 100%; align-items: flex-start; margin-top: 0; }
     .ps-cpw-step-title { font-size: 22px; }
     .ps-cpw-field-grid { grid-template-columns: 1fr; gap: 18px; }
+    .ps-cpw-split { grid-template-columns: 1fr; gap: 18px; }
+    .ps-cpw-photo-preview { max-width: 220px; }
     .ps-cpw-card-row { gap: 8px; }
     .ps-cpw-card { padding: 10px 6px 8px; }
     .ps-cpw-card-thumb { height: 80px; }
@@ -4256,6 +4331,264 @@ const STYLES = `
     .ps-cpw-back-btn { text-align: center; }
   }
 
+  /* ════════════════════════════════════════════════════════════════
+     ProfileMeasurementsView (.ps-pmv-*) — full profile detail with
+     all body measurements, basics, saved sizes history, and actions.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-pmv-root {
+    display: flex; flex-direction: column; gap: 24px;
+    padding: 4px 4px 24px;
+  }
+  .ps-pmv-hero {
+    display: flex; align-items: center; gap: 18px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid var(--ps-border-subtle);
+  }
+  .ps-pmv-hero-avatar {
+    width: 76px; height: 76px;
+    border-radius: 50%;
+    background: var(--ps-bg-secondary);
+    border: 2px solid var(--ps-accent);
+    color: var(--ps-accent);
+    display: flex; align-items: center; justify-content: center;
+    overflow: hidden; flex-shrink: 0;
+  }
+  .ps-pmv-hero-avatar img {
+    width: 100%; height: 100%; object-fit: cover;
+  }
+  .ps-pmv-hero-info { flex: 1; min-width: 0; }
+  .ps-pmv-hero-eyebrow {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--ps-accent);
+    margin-bottom: 6px;
+  }
+  .ps-pmv-hero-name {
+    font-size: 28px; font-weight: 700;
+    color: var(--ps-text-primary);
+    margin: 0;
+    letter-spacing: -0.01em;
+  }
+
+  /* Basics row — height / weight / age stats */
+  .ps-pmv-basics {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+  }
+  .ps-pmv-basic {
+    background: var(--ps-bg-secondary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 10px;
+    padding: 16px 18px;
+    display: flex; flex-direction: column; gap: 4px;
+  }
+  .ps-pmv-basic-label {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-pmv-basic-value {
+    font-size: 22px; font-weight: 700;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+  }
+
+  /* Section blocks */
+  .ps-pmv-section {
+    display: flex; flex-direction: column; gap: 14px;
+  }
+  .ps-pmv-section-head {
+    display: flex; flex-direction: column; gap: 4px;
+  }
+  .ps-pmv-section-title {
+    font-size: 12px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+  }
+  .ps-pmv-section-title-row {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 12px;
+  }
+  .ps-pmv-loading-pill {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 6px 12px;
+    background: rgba(33, 84, 239, 0.08);
+    color: var(--ps-accent);
+    border-radius: 999px;
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.1em; text-transform: uppercase;
+  }
+  .ps-pmv-loading-spinner {
+    width: 12px; height: 12px;
+    border: 2px solid rgba(33, 84, 239, 0.25);
+    border-top-color: var(--ps-accent);
+    border-radius: 50%;
+    animation: ps-pmv-spin 0.8s linear infinite;
+  }
+  @keyframes ps-pmv-spin {
+    to { transform: rotate(360deg); }
+  }
+  .ps-pmv-section-sub {
+    font-size: 12px; font-weight: 400;
+    color: var(--ps-text-muted);
+  }
+
+  /* Body measurements grid */
+  .ps-pmv-measure-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+  }
+  .ps-pmv-measure {
+    background: var(--ps-bg-primary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 10px;
+    padding: 12px 14px;
+    display: flex; flex-direction: column; gap: 4px;
+  }
+  .ps-pmv-measure-label {
+    font-size: 9px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-pmv-measure-value {
+    font-size: 18px; font-weight: 700;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+  }
+  .ps-pmv-measure-value.ps-loading {
+    color: var(--ps-border-color);
+    animation: ps-pmv-shimmer 1.4s ease-in-out infinite;
+  }
+  .ps-pmv-measure.ps-loading {
+    background: linear-gradient(
+      90deg,
+      var(--ps-bg-primary) 0%,
+      var(--ps-bg-secondary) 50%,
+      var(--ps-bg-primary) 100%
+    );
+    background-size: 200% 100%;
+    animation: ps-pmv-skeleton 1.6s ease-in-out infinite;
+  }
+  @keyframes ps-pmv-shimmer {
+    0%, 100% { opacity: 0.5; }
+    50%      { opacity: 1; }
+  }
+  @keyframes ps-pmv-skeleton {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  /* Saved sizes history (per-product cache) */
+  .ps-pmv-history {
+    display: flex; flex-direction: column; gap: 8px;
+  }
+  .ps-pmv-history-card {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px;
+    background: var(--ps-bg-primary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 10px;
+  }
+  .ps-pmv-history-thumb {
+    width: 44px; height: 44px;
+    border-radius: 6px; overflow: hidden;
+    background: var(--ps-bg-secondary);
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-pmv-history-thumb img {
+    max-width: 100%; max-height: 100%; object-fit: contain;
+  }
+  .ps-pmv-history-info {
+    flex: 1; min-width: 0;
+    display: flex; flex-direction: column; gap: 2px;
+  }
+  .ps-pmv-history-name {
+    font-size: 13px; font-weight: 600;
+    color: var(--ps-text-primary);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .ps-pmv-history-meta {
+    font-size: 10px;
+    color: var(--ps-text-muted);
+  }
+  .ps-pmv-history-size {
+    font-size: 22px; font-weight: 700;
+    color: var(--ps-accent);
+    font-feature-settings: "tnum" 1;
+  }
+
+  /* Actions */
+  .ps-pmv-actions {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 12px;
+    padding-top: 18px;
+    border-top: 1px solid var(--ps-border-subtle);
+    margin-top: 4px;
+  }
+  .ps-pmv-actions-right {
+    display: flex; align-items: center; gap: 8px;
+  }
+  .ps-pmv-btn-secondary,
+  .ps-pmv-btn-edit,
+  .ps-pmv-btn-delete {
+    background: none; border: 1px solid var(--ps-border-color);
+    border-radius: 6px;
+    padding: 10px 16px;
+    font-family: inherit; font-size: 11px; font-weight: 600;
+    letter-spacing: 0.06em;
+    color: var(--ps-text-secondary);
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s;
+  }
+  .ps-pmv-btn-secondary:hover,
+  .ps-pmv-btn-edit:hover {
+    border-color: var(--ps-accent);
+    color: var(--ps-accent);
+  }
+  .ps-pmv-btn-delete:hover {
+    border-color: var(--ps-error-color);
+    color: var(--ps-error-color);
+  }
+  .ps-pmv-btn-primary {
+    background: var(--ps-accent); color: #FFFFFF;
+    border: none; border-radius: 6px;
+    padding: 11px 18px;
+    font-family: inherit; font-size: 11px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    cursor: pointer;
+    transition: opacity 0.15s, transform 0.15s, background 0.2s;
+    box-shadow: 0 4px 14px rgba(33, 84, 239, 0.18);
+    display: inline-flex; align-items: center; gap: 8px;
+    justify-content: center;
+  }
+  .ps-pmv-btn-primary:hover:not(:disabled) { opacity: 0.92; }
+  .ps-pmv-btn-primary:active:not(:disabled) { transform: scale(0.98); }
+  .ps-pmv-btn-primary:disabled {
+    background: var(--ps-text-muted);
+    cursor: not-allowed;
+    box-shadow: none;
+    opacity: 0.65;
+  }
+  .ps-pmv-btn-spinner {
+    width: 12px; height: 12px;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+    border-top-color: #FFFFFF;
+    border-radius: 50%;
+    animation: ps-pmv-spin 0.8s linear infinite;
+  }
+
+  @media (max-width: 768px) {
+    .ps-pmv-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
+    .ps-pmv-hero-name { font-size: 22px; }
+    .ps-pmv-basics { grid-template-columns: 1fr; }
+    .ps-pmv-measure-grid { grid-template-columns: repeat(2, 1fr); }
+    .ps-pmv-actions { flex-direction: column; align-items: stretch; gap: 10px; }
+    .ps-pmv-actions-right { flex-wrap: wrap; }
+  }
+
   /* Big product image */
   .ps-msd-image {
     width: 100%; height: 240px;
@@ -7361,6 +7694,35 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
   const [weightVal, setWeightVal] = useState("");
   const [ageVal, setAgeVal] = useState("");
   const [error, setError] = useState("");
+  const [photoBase64, setPhotoBase64] = useState(null);
+  const [photoUploading, setPhotoUploading] = useState(false);
+  const photoInputRef = useRef(null);
+  const handlePhotoSelect = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setError(t("Please upload an image file"));
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      setError(t("Image must be under 10MB"));
+      return;
+    }
+    setPhotoUploading(true);
+    try {
+      const base64 = await compressImage(file);
+      setPhotoBase64(base64);
+      setError("");
+    } catch {
+      setError(t("Failed to process image"));
+    } finally {
+      setPhotoUploading(false);
+    }
+  };
+  const handleRemovePhoto = () => {
+    setPhotoBase64(null);
+    if (photoInputRef.current) photoInputRef.current.value = "";
+  };
   const [chestProfile, setChestProfile] = useState(null);
   const [midsectionProfile, setMidsectionProfile] = useState(null);
   const [seatProfile, setSeatProfile] = useState(null);
@@ -7411,7 +7773,8 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
       age: parseFloat(ageVal),
       chestProfile: chestProfile || void 0,
       midsectionProfile: midsectionProfile || void 0,
-      hipProfile: isWomen ? hipProfile || void 0 : seatProfile || void 0
+      hipProfile: isWomen ? hipProfile || void 0 : seatProfile || void 0,
+      photoBase64: photoBase64 || void 0
     };
     onSave(data);
   };
@@ -7468,70 +7831,115 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
           /* @__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-grid", children: [
-        /* @__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-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__ */ jsx(
-            "input",
-            {
-              type: "number",
-              inputMode: "numeric",
-              className: "ps-cpw-input",
-              value: heightVal,
-              placeholder: unit === "cm" ? "173" : "68",
-              onChange: (e) => {
-                setHeightVal(e.target.value);
-                setError("");
+          /* @__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-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" ? "154" : "70",
-              onChange: (e) => {
-                setWeightVal(e.target.value);
-                setError("");
+          /* @__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__ */ jsxs("div", { className: "ps-cpw-field", children: [
-          /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
-            t("AGE"),
-            " (",
-            t("years"),
-            ")"
-          ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-split-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-cpw-field-label", children: t("PROFILE PHOTO (OPTIONAL)") }),
           /* @__PURE__ */ jsx(
             "input",
             {
-              type: "number",
-              inputMode: "numeric",
-              className: "ps-cpw-input",
-              value: ageVal,
-              placeholder: "30",
-              onChange: (e) => {
-                setAgeVal(e.target.value);
-                setError("");
+              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: "×"
               }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              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") })
+              ]
             }
           )
         ] })
@@ -7593,6 +8001,137 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
     ] })
   ] });
 }
+const FIELDS_MEN = [
+  { key: "chest", label: "CHEST" },
+  { key: "waist", label: "WAIST" },
+  { key: "hips", label: "HIPS" },
+  { key: "shoulderWidth", label: "SHOULDER" },
+  { key: "sleeveLength", label: "SLEEVE" },
+  { key: "neckCircumference", label: "NECK" },
+  { key: "inseam", label: "INSEAM" },
+  { key: "thighCircumference", label: "THIGH" }
+];
+const FIELDS_WOMEN = [
+  { key: "bust", label: "BUST" },
+  { key: "waist", label: "WAIST" },
+  { key: "hips", label: "HIPS" },
+  { key: "shoulderWidth", label: "SHOULDER" },
+  { key: "sleeveLength", label: "SLEEVE" },
+  { key: "neckCircumference", label: "NECK" },
+  { key: "inseam", label: "INSEAM" },
+  { key: "thighCircumference", label: "THIGH" }
+];
+function ProfileMeasurementsView({
+  profile,
+  isActive,
+  onSelect,
+  onEdit,
+  onDelete,
+  onBack,
+  onSave,
+  t
+}) {
+  const fields = profile.gender === "female" ? FIELDS_WOMEN : FIELDS_MEN;
+  const measurements = profile.measurements || {};
+  const unit = profile.measurementsUnit || "cm";
+  const hasMeasurements = Object.keys(measurements).some((k) => measurements[k] != null);
+  const heightDisplay = (() => {
+    const h = profile.height ?? profile.heightCm;
+    if (!h) return "—";
+    if (profile.heightUnit === "in" || profile.heightUnit === "ft") {
+      const ft = Math.floor(h / 12);
+      const inches = Math.round(h % 12);
+      return `${ft}'${inches}"`;
+    }
+    return `${Math.round(h)} cm`;
+  })();
+  const weightDisplay = (() => {
+    const w = profile.weight ?? profile.weightKg;
+    if (!w) return "—";
+    return `${Math.round(w)} ${profile.weightUnit || "kg"}`;
+  })();
+  const ageDisplay = profile.age ? `${profile.age}` : "—";
+  return /* @__PURE__ */ jsxs("div", { className: "ps-pmv-root", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-pmv-hero", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-pmv-hero-avatar", children: profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: profile.name }) : /* @__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: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-hero-info", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-hero-eyebrow", children: isActive ? t("ACTIVE PROFILE") : profile.gender === "female" ? t("WOMEN'S FIT") : t("MEN'S FIT") }),
+        /* @__PURE__ */ jsx("h2", { className: "ps-pmv-hero-name", children: profile.name })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basics", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-label", children: t("HEIGHT") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-value", children: heightDisplay })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-label", children: t("WEIGHT") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-value", children: weightDisplay })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-label", children: t("AGE") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-basic-value", children: ageDisplay })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-head", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-title-row", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-title", children: t("BODY MEASUREMENTS") }),
+          !hasMeasurements && /* @__PURE__ */ jsxs("div", { className: "ps-pmv-loading-pill", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-loading-spinner" }),
+            /* @__PURE__ */ jsx("span", { children: t("Calculating...") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-sub", children: hasMeasurements ? t("Calculated from your basics. Used to recommend the perfect size for any product.") : t("Our AI is computing your full body proportions — this usually takes a few seconds.") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ps-pmv-measure-grid", children: fields.map((f) => {
+        const v = measurements[f.key];
+        return /* @__PURE__ */ jsxs("div", { className: `ps-pmv-measure${v == null ? " ps-loading" : ""}`, children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-pmv-measure-label", children: t(f.label) }),
+          /* @__PURE__ */ jsx("div", { className: `ps-pmv-measure-value${v == null ? " ps-loading" : ""}`, children: v != null ? `${Math.round(v * 10) / 10} ${unit}` : "—" })
+        ] }, f.key);
+      }) })
+    ] }),
+    profile.sizeHistory && profile.sizeHistory.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-head", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-title", children: t("SAVED SIZES") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-sub", children: t("Recommendations from this profile across products") })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ps-pmv-history", children: profile.sizeHistory.slice(0, 6).map((entry) => /* @__PURE__ */ jsxs("div", { className: "ps-pmv-history-card", children: [
+        entry.productImage && /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-thumb", children: /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: entry.productTitle }) }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-history-info", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-name", children: entry.productTitle }),
+          /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-meta", children: new Date(entry.savedAt).toLocaleDateString(void 0, { month: "short", day: "numeric" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-size", children: entry.recommendedSize })
+      ] }, `${entry.productId}-${entry.savedAt}`)) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-pmv-actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: onBack, children: t("Back") }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-actions-right", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-edit", onClick: onEdit, children: t("Edit") }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-delete", onClick: onDelete, children: t("Delete") }),
+        !isActive && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: onSelect, children: t("USE THIS PROFILE") }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ps-pmv-btn-primary",
+            onClick: onSave,
+            disabled: !hasMeasurements,
+            children: hasMeasurements ? t("SAVE") : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-pmv-btn-spinner" }),
+              t("CALCULATING")
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function ProfileAvatar({ gender }) {
   return /* @__PURE__ */ jsxs("div", { className: "ps-msp-avatar", children: [
     /* @__PURE__ */ jsx(UserIcon, { size: 28 }),
@@ -7604,6 +8143,7 @@ function ProfileCard({
   isActive,
   onSelect,
   onEdit,
+  onOpenDetail,
   t
 }) {
   const heightDisplay = (() => {
@@ -7626,40 +8166,49 @@ function ProfileCard({
     if (!ts) return null;
     return new Date(ts).toLocaleDateString(void 0, { month: "short", day: "numeric" });
   })();
-  return /* @__PURE__ */ jsxs("div", { className: `ps-msp-card${isActive ? " ps-active" : ""}`, children: [
-    /* @__PURE__ */ jsx("div", { className: "ps-msp-card-header", children: /* @__PURE__ */ jsx("span", { className: "ps-msp-card-tag", children: isActive ? t("DEFAULT PROFILE") : profile.gender === "female" ? t("WOMEN'S FIT") : t("MEN'S FIT") }) }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msp-card-thumb", children: /* @__PURE__ */ jsx(ProfileAvatar, { gender: profile.gender }) }),
-    /* @__PURE__ */ jsx("div", { className: "ps-msp-card-name", children: profile.name }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-msp-card-meta", children: [
-      heightDisplay && /* @__PURE__ */ jsxs("div", { className: "ps-msp-meta-row", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-label", children: t("HEIGHT") }),
-        /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-value", children: heightDisplay })
-      ] }),
-      weightDisplay && /* @__PURE__ */ jsxs("div", { className: "ps-msp-meta-row", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-label", children: t("WEIGHT") }),
-        /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-value", children: weightDisplay })
-      ] }),
-      updatedDisplay && /* @__PURE__ */ jsxs("div", { className: "ps-msp-meta-row", children: [
-        /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-label", children: t("LAST UPDATE") }),
-        /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-value", children: updatedDisplay })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-msp-card-actions", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: `ps-msp-card-select${isActive ? " ps-active" : ""}`,
-          onClick: onSelect,
-          children: isActive ? t("SELECTED") : t("SELECT")
-        }
-      ),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msp-card-edit", onClick: onEdit, "aria-label": t("Edit"), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
-        /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-        /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
-      ] }) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `ps-msp-card${isActive ? " ps-active" : ""}`,
+      onClick: onOpenDetail,
+      role: "button",
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-msp-card-header", children: /* @__PURE__ */ jsx("span", { className: "ps-msp-card-tag", children: isActive ? t("DEFAULT PROFILE") : profile.gender === "female" ? t("WOMEN'S FIT") : t("MEN'S FIT") }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msp-card-thumb", children: profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: profile.name, className: "ps-msp-card-photo" }) : /* @__PURE__ */ jsx(ProfileAvatar, { gender: profile.gender }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msp-card-name", children: profile.name }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msp-card-meta", children: [
+          heightDisplay && /* @__PURE__ */ jsxs("div", { className: "ps-msp-meta-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-label", children: t("HEIGHT") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-value", children: heightDisplay })
+          ] }),
+          weightDisplay && /* @__PURE__ */ jsxs("div", { className: "ps-msp-meta-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-label", children: t("WEIGHT") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-value", children: weightDisplay })
+          ] }),
+          updatedDisplay && /* @__PURE__ */ jsxs("div", { className: "ps-msp-meta-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-label", children: t("LAST UPDATE") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-msp-meta-value", children: updatedDisplay })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-msp-card-actions", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `ps-msp-card-select${isActive ? " ps-active" : ""}`,
+              onClick: onSelect,
+              children: isActive ? t("SELECTED") : t("SELECT")
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msp-card-edit", onClick: onEdit, "aria-label": t("Edit"), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
+            /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+            /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
 }
 function CreateProfileCard({ onClick, t }) {
   return /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-msp-card ps-msp-card-create", onClick, children: [
@@ -7701,6 +8250,8 @@ function MySizingProfilesView({
   t
 }) {
   const [creating, setCreating] = useState(false);
+  const [viewingId, setViewingId] = useState(null);
+  const viewingProfile = viewingId ? profiles.find((p) => p.id === viewingId) || null : null;
   const allHistory = useMemo(() => {
     const items = [];
     for (const p of profiles) {
@@ -7714,12 +8265,51 @@ function MySizingProfilesView({
     onSaveNewProfile(data);
     setCreating(false);
   };
-  return /* @__PURE__ */ jsx("div", { className: "ps-msp-root", children: /* @__PURE__ */ jsx("div", { className: "ps-msp-scroll", children: creating ? (
+  return /* @__PURE__ */ jsx("div", { className: "ps-msp-root", children: /* @__PURE__ */ jsx("div", { className: "ps-msp-scroll", children: viewingProfile ? (
+    /* ── Profile detail view (full body measurements) ── */
+    /* @__PURE__ */ jsx(
+      ProfileMeasurementsView,
+      {
+        profile: viewingProfile,
+        isActive: viewingProfile.id === activeProfileId,
+        onSelect: () => {
+          onSelectProfile(viewingProfile.id);
+          setViewingId(null);
+        },
+        onEdit: () => {
+          onEditProfile(viewingProfile);
+        },
+        onDelete: () => {
+          onDeleteProfile(viewingProfile.id);
+          setViewingId(null);
+        },
+        onBack: () => setViewingId(null),
+        onSave: () => setViewingId(null),
+        t
+      }
+    )
+  ) : creating ? (
     /* ── Multi-step create wizard (Identity → Silhouette) ── */
     /* @__PURE__ */ jsx(
       CreateProfileWizard,
       {
-        onSave: handleSaveNewProfile,
+        onSave: (data) => {
+          handleSaveNewProfile(data);
+          setTimeout(() => {
+            const latest = typeof window !== "undefined" ? (() => {
+              try {
+                const raw = localStorage.getItem("primestyle_profiles");
+                if (raw) {
+                  const list = JSON.parse(raw);
+                  if (list.length > 0) return list[0].id;
+                }
+              } catch {
+              }
+              return null;
+            })() : null;
+            if (latest) setViewingId(latest);
+          }, 50);
+        },
         onCancel: () => setCreating(false),
         t
       }
@@ -7738,6 +8328,7 @@ function MySizingProfilesView({
           isActive: p.id === activeProfileId,
           onSelect: () => onSelectProfile(p.id),
           onEdit: () => onEditProfile(p),
+          onOpenDetail: () => setViewingId(p.id),
           t
         },
         p.id
@@ -10031,7 +10622,9 @@ function PrimeStyleTryonInner({
                 createdAt: Date.now(),
                 lastUsedAt: Date.now()
               };
-              setProfiles((prev) => [newProfile, ...prev]);
+              const nextProfiles = [newProfile, ...profiles];
+              lsSet("profiles", nextProfiles);
+              setProfiles(nextProfiles);
               setActiveProfileId$1(newProfile.id);
               const heightVal = newProfile.heightCm || newProfile.height || 0;
               const weightVal = newProfile.weightKg || newProfile.weight || 0;
@@ -10045,7 +10638,11 @@ function PrimeStyleTryonInner({
                   heightUnit: heightUnitVal,
                   weightUnit: weightUnitVal,
                   gender: newProfile.gender,
-                  age: newProfile.age
+                  age: newProfile.age,
+                  chestProfile: newProfile.chestProfile,
+                  midsectionProfile: newProfile.midsectionProfile,
+                  hipProfile: newProfile.hipProfile,
+                  bodyImage: newProfile.photoBase64
                 }).then((est) => {
                   if (est) {
                     updateProfileMeasurements(newProfile.id, est.estimates, est.unit);
@@ -10080,7 +10677,7 @@ function PrimeStyleTryonInner({
       /* @__PURE__ */ jsx("span", { children: resolvedButtonText })
     ] }),
     view !== "idle" && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" ? " ps-tryon-modal-wide" : ""}${view === "profiles" ? " ps-tryon-modal-tall" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
         /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
           /* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
           /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setView(view === "profiles" ? "body-profile" : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),