@primestyleai/tryon 5.8.32 → 5.8.33

package/dist/react/index.js

@@ -5179,101 +5179,141 @@ const STYLES = `
   }
 
   /* ════════════════════════════════════════════════════════════════
-     ProfileMeasurementsView (.ps-pmv-*) — full profile detail with
-     all body measurements, basics, saved sizes history, and actions.
+     ProfileMeasurementsView (.ps-pmv-*) — minimal monoline-icon
+     redesign. Two-column body: silhouette diagram on the left,
+     basics + measurements list (each with an inline line-art icon)
+     on the right. No avatar, no card boxes — just typography, icons
+     and a body diagram, all vw/clamp scaled.
      ════════════════════════════════════════════════════════════════ */
   .ps-pmv-root {
-    display: flex; flex-direction: column; gap: 24px;
-    padding: 4px 4px 24px;
+    display: flex; flex-direction: column;
+    gap: clamp(14px, 1.3vw, 28px);
+    padding: clamp(2px, 0.25vw, 6px) clamp(2px, 0.25vw, 6px) clamp(14px, 1.3vw, 28px);
   }
+
+  /* Hero — name + eyebrow only, no avatar */
   .ps-pmv-hero {
-    display: flex; align-items: center; gap: 18px;
-    padding-bottom: 18px;
+    display: flex; flex-direction: column;
+    gap: clamp(4px, 0.35vw, 10px);
+    padding-bottom: clamp(10px, 0.95vw, 20px);
     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;
-    /* Bias the crop toward the top of the photo so the head/face shows
-       through the circular avatar instead of the torso. Works for any
-       full-body or head-and-torso photo where the head is in the upper
-       portion of the frame. */
-    object-position: 50% 12%;
-  }
-  .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;
+    font-size: clamp(9px, 0.6vw, 12px); font-weight: 700;
+    letter-spacing: 0.18em; text-transform: uppercase;
     color: var(--ps-accent);
-    margin-bottom: 6px;
   }
   .ps-pmv-hero-name {
-    font-size: 28px; font-weight: 700;
+    font-size: clamp(18px, 1.5vw, 32px); font-weight: 700;
     color: var(--ps-text-primary);
     margin: 0;
     letter-spacing: -0.01em;
+    line-height: 1.1;
   }
 
-  /* Basics row — height / weight / age stats */
-  .ps-pmv-basics {
+  /* Two-column split — diagram on left, data on right */
+  .ps-pmv-split {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 14px;
+    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
+    gap: clamp(16px, 1.6vw, 36px);
+    align-items: start;
   }
-  .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-diagram {
+    display: flex; flex-direction: column; align-items: center;
+    gap: clamp(6px, 0.5vw, 12px);
+    padding: clamp(8px, 0.8vw, 18px) 0;
+    color: var(--ps-text-primary);
+  }
+  .ps-pmv-body-diagram-svg {
+    width: 100%;
+    max-width: clamp(110px, 9vw, 180px);
+    height: auto;
+    color: var(--ps-text-primary);
+    opacity: 0.78;
+  }
+  .ps-pmv-diagram-caption {
+    font-size: clamp(8px, 0.55vw, 11px);
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-pmv-data {
+    display: flex; flex-direction: column;
+    gap: clamp(14px, 1.2vw, 26px);
+    min-width: 0;
+  }
+
+  /* Basics list — height / weight / age, inline icon + label + value */
+  .ps-pmv-basics {
+    display: flex; flex-direction: column;
+    gap: clamp(6px, 0.55vw, 14px);
+    padding-bottom: clamp(10px, 0.9vw, 18px);
+    border-bottom: 1px solid var(--ps-border-subtle);
   }
+  .ps-pmv-basic-row {
+    display: flex; align-items: center;
+    gap: clamp(8px, 0.7vw, 16px);
+  }
+  .ps-pmv-basic-icon {
+    flex-shrink: 0;
+    width: clamp(14px, 1vw, 20px);
+    height: clamp(14px, 1vw, 20px);
+    color: var(--ps-text-muted);
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  .ps-pmv-basic-icon svg { width: 100%; height: 100%; }
   .ps-pmv-basic-label {
-    font-size: 10px; font-weight: 700;
-    letter-spacing: 0.14em; text-transform: uppercase;
+    flex: 1; min-width: 0;
+    font-size: clamp(9px, 0.65vw, 12px);
+    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;
+    font-size: clamp(13px, 0.95vw, 18px);
+    font-weight: 700;
     color: var(--ps-text-primary);
     font-feature-settings: "tnum" 1;
+    text-align: right;
   }
 
-  /* Section blocks */
+  /* Section blocks (BODY MEASUREMENTS) */
   .ps-pmv-section {
-    display: flex; flex-direction: column; gap: 14px;
+    display: flex; flex-direction: column;
+    gap: clamp(8px, 0.7vw, 16px);
   }
   .ps-pmv-section-head {
-    display: flex; flex-direction: column; gap: 4px;
+    display: flex; flex-direction: column; gap: clamp(2px, 0.2vw, 6px);
   }
   .ps-pmv-section-title {
-    font-size: 12px; font-weight: 700;
-    letter-spacing: 0.14em; text-transform: uppercase;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
     color: var(--ps-text-primary);
   }
   .ps-pmv-section-title-row {
     display: flex; align-items: center; justify-content: space-between;
-    gap: 12px;
+    gap: clamp(8px, 0.7vw, 14px);
   }
   .ps-pmv-loading-pill {
-    display: inline-flex; align-items: center; gap: 8px;
-    padding: 6px 12px;
+    display: inline-flex; align-items: center;
+    gap: clamp(4px, 0.4vw, 10px);
+    padding: clamp(3px, 0.3vw, 7px) clamp(7px, 0.6vw, 14px);
     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;
+    font-size: clamp(8px, 0.55vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
   }
   .ps-pmv-loading-spinner {
-    width: 12px; height: 12px;
-    border: 2px solid rgba(33, 84, 239, 0.25);
+    width: clamp(8px, 0.65vw, 14px);
+    height: clamp(8px, 0.65vw, 14px);
+    border: 1.5px solid rgba(33, 84, 239, 0.25);
     border-top-color: var(--ps-accent);
     border-radius: 50%;
     animation: ps-pmv-spin 0.8s linear infinite;
@@ -5281,141 +5321,111 @@ const STYLES = `
   @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;
+  /* Body measurements list — single column, icon + label + value rows */
+  .ps-pmv-measure-list {
+    display: flex; flex-direction: column;
   }
-  .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-row {
+    display: flex; align-items: center;
+    gap: clamp(8px, 0.7vw, 16px);
+    padding: clamp(8px, 0.7vw, 14px) 0;
+    border-bottom: 1px solid var(--ps-border-subtle);
   }
+  .ps-pmv-measure-row:last-child { border-bottom: none; }
+  .ps-pmv-measure-icon {
+    flex-shrink: 0;
+    width: clamp(14px, 1vw, 20px);
+    height: clamp(14px, 1vw, 20px);
+    color: var(--ps-text-muted);
+    display: inline-flex; align-items: center; justify-content: center;
+  }
+  .ps-pmv-measure-icon svg { width: 100%; height: 100%; }
   .ps-pmv-measure-label {
-    font-size: 9px; font-weight: 700;
-    letter-spacing: 0.12em; text-transform: uppercase;
+    flex: 1; min-width: 0;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
     color: var(--ps-text-muted);
   }
   .ps-pmv-measure-value {
-    font-size: 18px; font-weight: 700;
+    font-size: clamp(12px, 0.85vw, 16px);
+    font-weight: 700;
     color: var(--ps-text-primary);
     font-feature-settings: "tnum" 1;
+    text-align: right;
   }
   .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;
+  .ps-pmv-measure-row.ps-loading .ps-pmv-measure-icon,
+  .ps-pmv-measure-row.ps-loading .ps-pmv-measure-label {
+    opacity: 0.55;
   }
   @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; }
-  }
 
   /* Inline measurement edit inputs */
-  .ps-pmv-measure.ps-editing {
-    border-color: var(--ps-accent);
+  .ps-pmv-measure-row.ps-editing {
     background: rgba(33, 84, 239, 0.04);
   }
   .ps-pmv-measure-edit {
-    display: flex; align-items: baseline; gap: 4px;
+    display: flex; align-items: baseline;
+    gap: clamp(2px, 0.2vw, 6px);
   }
   .ps-pmv-measure-input {
-    flex: 1; min-width: 0;
-    background: transparent; border: none; outline: none;
+    width: clamp(40px, 3vw, 70px);
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--ps-border-color);
+    outline: none;
     font-family: inherit;
-    font-size: 18px; font-weight: 700;
+    font-size: clamp(12px, 0.85vw, 16px);
+    font-weight: 700;
     color: var(--ps-text-primary);
-    padding: 0;
+    padding: clamp(2px, 0.15vw, 4px) 0;
+    text-align: right;
     font-feature-settings: "tnum" 1;
   }
+  .ps-pmv-measure-input:focus {
+    border-bottom-color: var(--ps-accent);
+  }
   .ps-pmv-measure-input::-webkit-outer-spin-button,
   .ps-pmv-measure-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-pmv-measure-input[type="number"] { -moz-appearance: textfield; }
   .ps-pmv-measure-input-unit {
-    font-size: 11px; color: var(--ps-text-muted); font-weight: 500;
-  }
-
-  /* Saved sizes history (per-product cache) — kept for backwards compat,
-     no longer rendered inside ProfileMeasurementsView */
-  .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;
+    font-size: clamp(8px, 0.55vw, 11px);
     color: var(--ps-text-muted);
-  }
-  .ps-pmv-history-size {
-    font-size: 22px; font-weight: 700;
-    color: var(--ps-accent);
-    font-feature-settings: "tnum" 1;
+    font-weight: 500;
   }
 
   /* Actions */
   .ps-pmv-actions {
     display: flex; align-items: center; justify-content: space-between;
-    gap: 12px;
-    padding-top: 18px;
+    gap: clamp(8px, 0.7vw, 14px);
+    padding-top: clamp(12px, 1vw, 22px);
     border-top: 1px solid var(--ps-border-subtle);
-    margin-top: 4px;
+    margin-top: clamp(2px, 0.2vw, 6px);
   }
   .ps-pmv-actions-right {
-    display: flex; align-items: center; gap: 8px;
+    display: flex; align-items: center;
+    gap: clamp(6px, 0.5vw, 12px);
   }
   .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;
+    background: none;
+    border: 1px solid var(--ps-border-color);
+    border-radius: clamp(4px, 0.35vw, 8px);
+    padding: clamp(6px, 0.55vw, 12px) clamp(10px, 0.9vw, 20px);
+    font-family: inherit;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 600;
+    letter-spacing: 0.08em;
     color: var(--ps-text-secondary);
     cursor: pointer;
     transition: border-color 0.15s, color 0.15s;
@@ -5431,14 +5441,19 @@ const STYLES = `
   }
   .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;
+    border: none;
+    border-radius: clamp(4px, 0.35vw, 8px);
+    padding: clamp(7px, 0.65vw, 14px) clamp(12px, 1vw, 22px);
+    font-family: inherit;
+    font-size: clamp(9px, 0.65vw, 12px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    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;
+    box-shadow: 0 0.3vw 1vw rgba(33, 84, 239, 0.18);
+    display: inline-flex; align-items: center;
+    gap: clamp(4px, 0.4vw, 10px);
     justify-content: center;
   }
   .ps-pmv-btn-primary:hover:not(:disabled) { opacity: 0.92; }
@@ -5450,22 +5465,14 @@ const STYLES = `
     opacity: 0.65;
   }
   .ps-pmv-btn-spinner {
-    width: 12px; height: 12px;
-    border: 2px solid rgba(255, 255, 255, 0.35);
+    width: clamp(8px, 0.65vw, 14px);
+    height: clamp(8px, 0.65vw, 14px);
+    border: 1.5px 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 / try-on image */
   .ps-msd-image {
     width: 100%; height: 420px;
@@ -9466,26 +9473,95 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
     ] })
   ] });
 }
+const HeightIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "21" }),
+  /* @__PURE__ */ jsx("polyline", { points: "7 6 12 3 17 6" }),
+  /* @__PURE__ */ jsx("polyline", { points: "7 18 12 21 17 18" })
+] });
+const WeightIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 7h14l-1.5 12a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2L5 7z" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 7a3 3 0 0 1 6 0" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "11", x2: "12", y2: "15" })
+] });
+const AgeIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx("polyline", { points: "12 7 12 12 15 14" })
+] });
+const ChestIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 8 L8 5 L16 5 L20 8 L20 13 L17 11 L17 17 L7 17 L7 11 L4 13 Z" }) });
+const BustIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M5 9 Q12 3 19 9" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "13", r: "2.5" }),
+  /* @__PURE__ */ jsx("circle", { cx: "15", cy: "13", r: "2.5" })
+] });
+const WaistIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 4 Q10 4 10 9 Q10 12 6 14" }),
+  /* @__PURE__ */ jsx("path", { d: "M18 4 Q14 4 14 9 Q14 12 18 14" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 14 Q10 16 10 20" }),
+  /* @__PURE__ */ jsx("path", { d: "M18 14 Q14 16 14 20" })
+] });
+const HipsIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M7 4 Q10 4 10 9 Q10 11 9 13" }),
+  /* @__PURE__ */ jsx("path", { d: "M17 4 Q14 4 14 9 Q14 11 15 13" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 14 Q12 22 19 14" })
+] });
+const ShoulderIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "2.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 13 Q8 9 12 9 Q16 9 20 13" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "15", x2: "20", y2: "15" })
+] });
+const SleeveIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 6 L8 4 L12 6 L11 11 L9 21 L5 21 L5 11 Z" }) });
+const NeckIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "6", r: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 9 L9 13 Q9 15 12 15 Q15 15 15 13 L15 9" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 17 Q12 19 19 17" })
+] });
+const InseamIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "21" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "15", y2: "3" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", y1: "21", x2: "15", y2: "21" })
+] });
+const ThighIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "M8 4 Q10 8 10 14 L9 21" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 4 Q14 8 14 14 L15 21" }),
+  /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "11", rx: "6", ry: "2" })
+] });
 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" }
+  { key: "chest", label: "CHEST", Icon: ChestIcon },
+  { key: "waist", label: "WAIST", Icon: WaistIcon },
+  { key: "hips", label: "HIPS", Icon: HipsIcon },
+  { key: "shoulderWidth", label: "SHOULDER", Icon: ShoulderIcon },
+  { key: "sleeveLength", label: "SLEEVE", Icon: SleeveIcon },
+  { key: "neckCircumference", label: "NECK", Icon: NeckIcon },
+  { key: "inseam", label: "INSEAM", Icon: InseamIcon },
+  { key: "thighCircumference", label: "THIGH", Icon: ThighIcon }
 ];
 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" }
+  { key: "bust", label: "BUST", Icon: BustIcon },
+  { key: "waist", label: "WAIST", Icon: WaistIcon },
+  { key: "hips", label: "HIPS", Icon: HipsIcon },
+  { key: "shoulderWidth", label: "SHOULDER", Icon: ShoulderIcon },
+  { key: "sleeveLength", label: "SLEEVE", Icon: SleeveIcon },
+  { key: "neckCircumference", label: "NECK", Icon: NeckIcon },
+  { key: "inseam", label: "INSEAM", Icon: InseamIcon },
+  { key: "thighCircumference", label: "THIGH", Icon: ThighIcon }
 ];
+const BodyDiagram = ({ female }) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 120 320", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", className: "ps-pmv-body-diagram-svg", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "60", cy: "28", r: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "60", y1: "46", x2: "60", y2: "58" }),
+  female ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M30 70 Q35 65 60 65 Q85 65 90 70" }),
+    /* @__PURE__ */ jsx("path", { d: "M30 70 Q26 110 32 145 Q40 165 60 168 Q80 165 88 145 Q94 110 90 70" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M22 72 Q32 62 60 62 Q88 62 98 72" }),
+    /* @__PURE__ */ jsx("path", { d: "M22 72 Q24 110 32 145 Q42 162 60 165 Q78 162 88 145 Q96 110 98 72" })
+  ] }),
+  /* @__PURE__ */ jsx("path", { d: "M22 72 Q12 130 18 175" }),
+  /* @__PURE__ */ jsx("path", { d: "M98 72 Q108 130 102 175" }),
+  /* @__PURE__ */ jsx("path", { d: "M40 168 L36 295" }),
+  /* @__PURE__ */ jsx("path", { d: "M80 168 L84 295" }),
+  /* @__PURE__ */ jsx("line", { x1: "30", y1: "295", x2: "42", y2: "295" }),
+  /* @__PURE__ */ jsx("line", { x1: "78", y1: "295", x2: "90", y2: "295" })
+] });
 function ProfileMeasurementsView({
   profile,
   isActive,
@@ -9545,60 +9621,64 @@ function ProfileMeasurementsView({
   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__ */ 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-split", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-diagram", children: [
+        /* @__PURE__ */ jsx(BodyDiagram, { female: profile.gender === "female" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-diagram-caption", children: t("Reference figure") })
       ] }),
-      /* @__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__ */ jsxs("div", { className: "ps-pmv-data", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basics", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-icon", children: /* @__PURE__ */ jsx(HeightIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-label", children: t("HEIGHT") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-value", children: heightDisplay })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-icon", children: /* @__PURE__ */ jsx(WeightIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-label", children: t("WEIGHT") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-value", children: weightDisplay })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-pmv-basic-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-icon", children: /* @__PURE__ */ jsx(AgeIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-label", children: t("AGE") }),
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-basic-value", children: ageDisplay })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-sub", children: hasMeasurements ? editing ? t("Tap any value to edit. Save when you're done.") : 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 && !editing ? " ps-loading" : ""}${editing ? " ps-editing" : ""}`, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-pmv-measure-label", children: t(f.label) }),
-          editing ? /* @__PURE__ */ jsxs("div", { className: "ps-pmv-measure-edit", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "number",
-                inputMode: "decimal",
-                className: "ps-pmv-measure-input",
-                value: draft[f.key] ?? "",
-                placeholder: "—",
-                onChange: (e) => handleDraftChange(f.key, e.target.value)
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-input-unit", children: unit })
-          ] }) : /* @__PURE__ */ jsx("div", { className: `ps-pmv-measure-value${v == null ? " ps-loading" : ""}`, children: v != null ? `${Math.round(v * 10) / 10} ${unit}` : "—" })
-        ] }, f.key);
-      }) })
+        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section", children: [
+          /* @__PURE__ */ jsx("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-measure-list", children: fields.map((f) => {
+            const v = measurements[f.key];
+            const Icon = f.Icon;
+            return /* @__PURE__ */ jsxs("div", { className: `ps-pmv-measure-row${v == null && !editing ? " ps-loading" : ""}${editing ? " ps-editing" : ""}`, children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-icon", children: /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-label", children: t(f.label) }),
+              editing ? /* @__PURE__ */ jsxs("div", { className: "ps-pmv-measure-edit", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    inputMode: "decimal",
+                    className: "ps-pmv-measure-input",
+                    value: draft[f.key] ?? "",
+                    placeholder: "—",
+                    onChange: (e) => handleDraftChange(f.key, e.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "ps-pmv-measure-input-unit", children: unit })
+              ] }) : /* @__PURE__ */ jsx("span", { className: `ps-pmv-measure-value${v == null ? " ps-loading" : ""}`, children: v != null ? `${Math.round(v * 10) / 10} ${unit}` : "—" })
+            ] }, f.key);
+          }) })
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-pmv-actions", children: [
       /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: editing ? handleEditCancel : onBack, children: editing ? t("Cancel") : t("Back") }),