@primestyleai/tryon 5.5.25 → 5.6.0

package/dist/react/index.js

@@ -218,6 +218,8 @@ const SIZE_CONVERSIONS = {
 };
 const TOTAL_STEPS = 3;
 const LS_PREFIX = "primestyle_";
+const PROFILES_KEY = "profiles";
+const ACTIVE_PROFILE_KEY = "active_profile_id";
 function lsGet(key, fallback) {
   if (typeof window === "undefined") return fallback;
   try {
@@ -233,11 +235,67 @@ function lsSet(key, value) {
   } catch {
   }
 }
-function isImperial(locale) {
-  return ["US", "UK", "AU"].includes(locale);
+function getProfiles() {
+  return lsGet(PROFILES_KEY, []);
 }
-function cx(base, override) {
-  return override ? `${base} ${override}` : base;
+function saveProfiles(profiles) {
+  lsSet(PROFILES_KEY, profiles);
+}
+function getActiveProfileId() {
+  return lsGet(ACTIVE_PROFILE_KEY, null);
+}
+function setActiveProfileId(id) {
+  lsSet(ACTIVE_PROFILE_KEY, id);
+}
+function getActiveProfile() {
+  const profiles = getProfiles();
+  if (profiles.length === 0) return null;
+  const activeId = getActiveProfileId();
+  if (activeId) {
+    const found = profiles.find((p) => p.id === activeId);
+    if (found) return found;
+  }
+  const sorted = [...profiles].sort(
+    (a, b) => (b.lastUsedAt || b.createdAt || 0) - (a.lastUsedAt || a.createdAt || 0)
+  );
+  return sorted[0] || null;
+}
+function updateProfile(id, patch) {
+  const profiles = getProfiles();
+  const idx = profiles.findIndex((p) => p.id === id);
+  if (idx < 0) return null;
+  const updated = { ...profiles[idx], ...patch, lastEditedAt: Date.now() };
+  profiles[idx] = updated;
+  saveProfiles(profiles);
+  return updated;
+}
+function updateProfileMeasurements(id, measurements, unit = "cm") {
+  return updateProfile(id, { measurements, measurementsUnit: unit });
+}
+function addSizeToHistory(profileId, entry) {
+  const profiles = getProfiles();
+  const idx = profiles.findIndex((p) => p.id === profileId);
+  if (idx < 0) return null;
+  const profile = profiles[idx];
+  const history = (profile.sizeHistory || []).filter(
+    (h) => h.productId !== entry.productId
+  );
+  history.unshift(entry);
+  const trimmed = history.slice(0, 50);
+  profiles[idx] = {
+    ...profile,
+    sizeHistory: trimmed,
+    lastUsedAt: Date.now()
+  };
+  saveProfiles(profiles);
+  return profiles[idx];
+}
+function getCachedSize(profile, productId) {
+  if (!profile.sizeHistory || profile.sizeHistory.length === 0) return null;
+  const entry = profile.sizeHistory.find((h) => h.productId === productId);
+  if (!entry) return null;
+  if (profile.lastEditedAt && profile.lastEditedAt > entry.savedAt) return null;
+  return entry;
 }
 function detectLocale() {
   if (typeof navigator === "undefined") return "US";
@@ -266,6 +324,159 @@ function getApiKey() {
 function getApiUrl(override) {
   return override || process.env.NEXT_PUBLIC_PRIMESTYLE_API_URL || "http://localhost:4000";
 }
+async function recommendForProduct(input) {
+  const profile = input.profile ?? getActiveProfile();
+  if (!profile) return null;
+  if (!input.skipCache) {
+    const cached = getCachedSize(profile, input.productId);
+    if (cached) {
+      return {
+        recommendedSize: cached.recommendedSize,
+        confidence: cached.confidence,
+        sections: cached.sections,
+        profileId: profile.id,
+        fromCache: true
+      };
+    }
+  }
+  let apiKey;
+  try {
+    apiKey = input.apiKey ?? getApiKey();
+  } catch {
+    return null;
+  }
+  const apiUrl = (input.apiUrl ?? getApiUrl()).replace(/\/+$/, "");
+  if (!apiKey) return null;
+  let sizeGuide = null;
+  if (input.sizeGuideData != null) {
+    try {
+      const sgRes = await fetch(`${apiUrl}/api/v1/sizing/sizeguide`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
+        body: JSON.stringify({
+          product: { title: input.productTitle, productId: input.productId },
+          sizeGuideRaw: input.sizeGuideData
+        })
+      });
+      if (sgRes.ok) sizeGuide = await sgRes.json();
+    } catch {
+    }
+  }
+  const measurements = {
+    gender: profile.gender,
+    sizingUnit: profile.measurementsUnit || "cm"
+  };
+  if (profile.measurements) {
+    for (const [key, value] of Object.entries(profile.measurements)) {
+      if (value != null) measurements[key] = value;
+    }
+  }
+  if (profile.height != null) measurements.height = profile.height;
+  if (profile.weight != null) measurements.weight = profile.weight;
+  if (profile.heightUnit) measurements.heightUnit = profile.heightUnit;
+  if (profile.weightUnit) measurements.weightUnit = profile.weightUnit;
+  if (profile.age) measurements.age = profile.age;
+  if (profile.chestProfile) measurements.chestProfile = profile.chestProfile;
+  if (profile.midsectionProfile) measurements.midsectionProfile = profile.midsectionProfile;
+  if (profile.hipProfile) measurements.hipProfile = profile.hipProfile;
+  const payload = {
+    method: "exact",
+    locale: profile.country || "US",
+    sizingUnit: profile.measurementsUnit || profile.sizingUnit || "cm",
+    product: { title: input.productTitle, productId: input.productId, description: "", variants: [] },
+    measurements
+  };
+  if (sizeGuide && sizeGuide.found) {
+    payload.sizeGuide = sizeGuide;
+  }
+  let result = null;
+  try {
+    const res = await fetch(`${apiUrl}/api/v1/sizing/recommend`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
+      body: JSON.stringify(payload)
+    });
+    if (!res.ok) return null;
+    result = await res.json();
+  } catch {
+    return null;
+  }
+  if (!result || !result.recommendedSize) return null;
+  const sectionsMap = result.sections ? Object.fromEntries(
+    Object.entries(result.sections).map(([name, sec]) => [name, sec.recommendedSize])
+  ) : void 0;
+  addSizeToHistory(profile.id, {
+    productId: input.productId,
+    productTitle: input.productTitle,
+    productImage: input.productImage,
+    recommendedSize: result.recommendedSize,
+    confidence: result.confidence,
+    sections: sectionsMap,
+    savedAt: Date.now()
+  });
+  return {
+    recommendedSize: result.recommendedSize,
+    confidence: result.confidence,
+    sections: sectionsMap,
+    profileId: profile.id,
+    fromCache: false,
+    raw: result
+  };
+}
+async function estimateFullMeasurements(args) {
+  let apiKey;
+  try {
+    apiKey = args.apiKey ?? getApiKey();
+  } catch {
+    return null;
+  }
+  const apiUrl = (args.apiUrl ?? getApiUrl()).replace(/\/+$/, "");
+  if (!apiKey) return null;
+  const requiredFields = [
+    "chest",
+    "bust",
+    "waist",
+    "hips",
+    "shoulderWidth",
+    "sleeveLength",
+    "inseam",
+    "neckCircumference",
+    "thighCircumference",
+    "footLengthCm"
+  ];
+  const payload = {
+    height: args.height,
+    weight: args.weight,
+    heightUnit: args.heightUnit,
+    weightUnit: args.weightUnit,
+    gender: args.gender,
+    requiredFields
+  };
+  if (args.age) payload.age = args.age;
+  if (args.chestProfile) payload.chestProfile = args.chestProfile;
+  if (args.midsectionProfile) payload.midsectionProfile = args.midsectionProfile;
+  if (args.hipProfile) payload.hipProfile = args.hipProfile;
+  if (args.bodyImage) payload.bodyImage = args.bodyImage;
+  try {
+    const res = await fetch(`${apiUrl}/api/v1/sizing/estimate`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
+      body: JSON.stringify(payload)
+    });
+    if (!res.ok) return null;
+    const data = await res.json();
+    if (!data?.estimates) return null;
+    return { estimates: data.estimates, unit: data.unit || "cm" };
+  } catch {
+    return null;
+  }
+}
+function isImperial(locale) {
+  return ["US", "UK", "AU"].includes(locale);
+}
+function cx(base, override) {
+  return override ? `${base} ${override}` : base;
+}
 const STYLES = `
   /* Variable defaults must live on BOTH the root (for the trigger button)
      and the overlay (which is React-portaled to <body> and therefore not
@@ -3557,6 +3768,292 @@ const STYLES = `
     margin: 14px 12px 0;
   }
 
+  /* ════════════════════════════════════════════════════════════════
+     MySizingProfilesView (.ps-msp-*) — full profile management screen
+     that replaces the old profile drawer. Grid of profile cards
+     matching the ATELIER reference design.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-msp-root {
+    display: flex; flex-direction: column;
+    height: 100%; min-height: 0;
+    margin: 0 -16px;
+  }
+  .ps-msp-topbar {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--ps-border-subtle);
+    flex-shrink: 0;
+  }
+  .ps-msp-back {
+    background: none; border: none;
+    color: var(--ps-text-primary); cursor: pointer;
+    padding: 6px;
+    display: flex; align-items: center; justify-content: center;
+    transition: opacity 0.15s;
+  }
+  .ps-msp-back:hover { opacity: 0.7; }
+  .ps-msp-back svg { width: 18px; height: 18px; }
+  .ps-msp-topbar-title {
+    font-size: 12px; font-weight: 700;
+    letter-spacing: 0.16em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+    flex: 1; text-align: center;
+  }
+  .ps-msp-topbar-spacer { width: 30px; flex-shrink: 0; }
+
+  .ps-msp-scroll {
+    flex: 1; min-height: 0;
+    overflow-y: auto; -webkit-overflow-scrolling: touch;
+    padding: 18px 16px 32px;
+  }
+  .ps-msp-header { margin-bottom: 18px; }
+  .ps-msp-title {
+    font-size: 26px; font-weight: 700;
+    color: var(--ps-text-primary);
+    margin: 0 0 6px;
+    letter-spacing: -0.01em;
+  }
+  .ps-msp-subtitle {
+    font-size: 13px; color: var(--ps-text-muted);
+    margin: 0; line-height: 1.5;
+  }
+
+  /* Card grid */
+  .ps-msp-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 14px;
+    margin-bottom: 28px;
+  }
+  .ps-msp-card {
+    background: var(--ps-bg-primary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 12px;
+    padding: 14px;
+    display: flex; flex-direction: column;
+    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    position: relative;
+  }
+  .ps-msp-card:hover {
+    border-color: var(--ps-text-primary);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+  }
+  .ps-msp-card.ps-active {
+    border-color: var(--ps-accent);
+    box-shadow: 0 4px 16px rgba(33,84,239,0.12);
+  }
+
+  .ps-msp-card-header {
+    display: flex; align-items: center; justify-content: flex-start;
+    margin-bottom: 8px;
+  }
+  .ps-msp-card-tag {
+    font-size: 9px; font-weight: 700;
+    letter-spacing: 0.12em; text-transform: uppercase;
+    background: var(--ps-bg-secondary);
+    color: var(--ps-text-muted);
+    padding: 4px 8px; border-radius: 4px;
+    border: 1px solid var(--ps-border-subtle);
+  }
+  .ps-msp-card.ps-active .ps-msp-card-tag {
+    background: var(--ps-accent); color: #FFFFFF;
+    border-color: var(--ps-accent);
+  }
+
+  .ps-msp-card-thumb {
+    height: 90px;
+    background: var(--ps-bg-secondary);
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    margin-bottom: 12px;
+    color: var(--ps-text-secondary);
+  }
+  .ps-msp-avatar {
+    position: relative;
+    display: flex; align-items: center; justify-content: center;
+    width: 56px; height: 56px;
+    border-radius: 50%;
+    background: var(--ps-bg-primary);
+    color: var(--ps-text-secondary);
+    border: 1.5px solid var(--ps-border-subtle);
+  }
+  .ps-msp-avatar-tag {
+    position: absolute; bottom: -2px; right: -2px;
+    width: 18px; height: 18px; border-radius: 50%;
+    background: var(--ps-accent); color: #FFFFFF;
+    font-size: 10px; font-weight: 700;
+    display: flex; align-items: center; justify-content: center;
+    border: 2px solid var(--ps-bg-primary);
+  }
+
+  .ps-msp-card-name {
+    font-size: 16px; font-weight: 700;
+    color: var(--ps-text-primary);
+    margin-bottom: 8px;
+  }
+  .ps-msp-card-meta {
+    display: flex; flex-direction: column;
+    gap: 4px;
+    margin-bottom: 12px;
+  }
+  .ps-msp-meta-row {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 4px 0;
+    border-bottom: 1px solid var(--ps-border-subtle);
+  }
+  .ps-msp-meta-row:last-child { border-bottom: none; }
+  .ps-msp-meta-label {
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-msp-meta-value {
+    font-size: 12px; font-weight: 600;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+  }
+
+  .ps-msp-card-actions {
+    display: flex; gap: 8px;
+    margin-top: auto;
+  }
+  .ps-msp-card-select {
+    flex: 1;
+    background: var(--ps-text-primary); color: #FFFFFF;
+    border: none; border-radius: 6px;
+    padding: 10px;
+    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;
+  }
+  .ps-msp-card-select:hover { opacity: 0.85; }
+  .ps-msp-card-select:active { transform: scale(0.97); }
+  .ps-msp-card-select.ps-active {
+    background: var(--ps-accent);
+  }
+  .ps-msp-card-edit {
+    width: 36px; height: 36px;
+    background: var(--ps-bg-primary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    color: var(--ps-text-secondary); cursor: pointer;
+    transition: border-color 0.15s, color 0.15s;
+  }
+  .ps-msp-card-edit:hover {
+    border-color: var(--ps-accent);
+    color: var(--ps-accent);
+  }
+
+  /* "Create New Profile" empty card */
+  .ps-msp-card-create {
+    background: var(--ps-bg-secondary);
+    border: 2px dashed var(--ps-border-color);
+    align-items: center; justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    min-height: 280px;
+    transition: border-color 0.15s, background 0.15s;
+  }
+  .ps-msp-card-create:hover {
+    border-color: var(--ps-accent);
+    background: rgba(33,84,239,0.04);
+  }
+  .ps-msp-create-icon {
+    width: 50px; height: 50px;
+    background: var(--ps-text-primary); color: #FFFFFF;
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    margin-bottom: 12px;
+  }
+  .ps-msp-create-title {
+    font-size: 15px; font-weight: 700;
+    color: var(--ps-text-primary);
+    margin-bottom: 4px;
+  }
+  .ps-msp-create-sub {
+    font-size: 9px; font-weight: 700;
+    letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+
+  /* Recent size calculations section */
+  .ps-msp-history-section {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid var(--ps-border-subtle);
+  }
+  .ps-msp-history-title {
+    font-size: 13px; font-weight: 700;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--ps-text-primary);
+    margin: 0 0 14px;
+  }
+  .ps-msp-history-list {
+    display: flex; flex-direction: column; gap: 8px;
+  }
+  .ps-msp-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: 8px;
+  }
+  .ps-msp-history-thumb {
+    width: 48px; height: 48px;
+    border-radius: 6px;
+    background: var(--ps-bg-secondary);
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-msp-history-thumb img {
+    max-width: 100%; max-height: 100%; object-fit: contain;
+  }
+  .ps-msp-history-info {
+    flex: 1; min-width: 0;
+    display: flex; flex-direction: column; gap: 2px;
+  }
+  .ps-msp-history-name {
+    font-size: 13px; font-weight: 600;
+    color: var(--ps-text-primary);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .ps-msp-history-profile {
+    font-size: 10px;
+    color: var(--ps-text-muted);
+  }
+  .ps-msp-history-meta {
+    font-size: 10px;
+    color: var(--ps-text-muted);
+    display: flex; align-items: center; gap: 4px;
+  }
+  .ps-msp-history-meta svg { color: var(--ps-text-muted); }
+  .ps-msp-history-size {
+    display: flex; flex-direction: column; align-items: flex-end;
+    flex-shrink: 0;
+  }
+  .ps-msp-history-size-label {
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--ps-text-muted);
+  }
+  .ps-msp-history-size-value {
+    font-size: 22px; font-weight: 700;
+    color: var(--ps-text-primary);
+    font-feature-settings: "tnum" 1;
+    line-height: 1;
+  }
+
+  @media (max-width: 768px) {
+    .ps-msp-grid { grid-template-columns: 1fr; }
+    .ps-msp-card-create { min-height: 200px; }
+    .ps-msp-title { font-size: 22px; }
+    .ps-msp-subtitle { font-size: 12px; }
+  }
+
   /* Big product image */
   .ps-msd-image {
     width: 100%; height: 240px;
@@ -4550,7 +5047,7 @@ function ProfileDetailModal({
   setProfileDetail,
   setProfiles,
   activeProfileId,
-  setActiveProfileId,
+  setActiveProfileId: setActiveProfileId2,
   t
 }) {
   if (!profileDetail) return null;
@@ -4598,7 +5095,7 @@ function ProfileDetailModal({
       ] }),
       /* @__PURE__ */ jsxs("button", { className: "ps-tryon-detail-delete", onClick: () => {
         setProfiles((prev) => prev.filter((x) => x.id !== p.id));
-        if (activeProfileId === p.id) setActiveProfileId(null);
+        if (activeProfileId === p.id) setActiveProfileId2(null);
         setProfileDetail(null);
       }, children: [
         /* @__PURE__ */ jsx(TrashIcon, {}),
@@ -5715,6 +6212,7 @@ function SizeResultView({
   handleTryOnSubmit,
   tryOnProcessing,
   bodyLandmarks,
+  estimationDone = false,
   activeSection,
   setActiveSection,
   t
@@ -5791,6 +6289,7 @@ function SizeResultView({
   const [poseLines, setPoseLines] = useState(null);
   const [poseReady, setPoseReady] = useState(false);
   const [imgDims, setImgDims] = useState({ w: 800, h: 1200 });
+  const analyzingDone = estimationDone;
   const handleImgLoad = useCallback((e) => {
     const el = e.currentTarget;
     if (el.naturalWidth && el.naturalHeight) {
@@ -5960,12 +6459,12 @@ function SizeResultView({
           /* @__PURE__ */ jsx("span", { children: t("Detecting body pose") })
         ] }),
         !sizingDone && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${bodyLandmarks ? " ps-active" : ""}`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: bodyLandmarks ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) }),
+          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-done" : bodyLandmarks ? " ps-active" : ""}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !bodyLandmarks ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "2" }) : !analyzingDone ? /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) : /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-check", children: "✓" }) }),
             /* @__PURE__ */ jsx("span", { children: t("Analyzing your size") })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step`, children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) }),
+          /* @__PURE__ */ jsxs("div", { className: `ps-tryon-snap-step${analyzingDone ? " ps-active" : ""}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-snap-step-icon", children: !analyzingDone ? /* @__PURE__ */ jsx("span", { className: "ps-tryon-snap-num", children: "3" }) : /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "1vw", height: "1vw", borderWidth: "1.5px" } }) }),
             /* @__PURE__ */ jsx("span", { children: t("Finding best fit for you") })
           ] })
         ] }),
@@ -6565,6 +7064,154 @@ function ErrorView({
     /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-submit", cn.submitButton), children: t("Try Again") })
   ] });
 }
+function ProfileAvatar({ gender }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ps-msp-avatar", children: [
+    /* @__PURE__ */ jsx(UserIcon, { size: 28 }),
+    gender && /* @__PURE__ */ jsx("span", { className: `ps-msp-avatar-tag ps-${gender}`, children: gender === "female" ? "♀" : "♂" })
+  ] });
+}
+function ProfileCard({
+  profile,
+  isActive,
+  onSelect,
+  onEdit,
+  t
+}) {
+  const heightDisplay = (() => {
+    const h = profile.height ?? profile.heightCm;
+    if (!h) return null;
+    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 null;
+    return `${Math.round(w)} ${profile.weightUnit || "kg"}`;
+  })();
+  const updatedDisplay = (() => {
+    const ts = profile.lastEditedAt || profile.lastUsedAt || profile.createdAt;
+    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" })
+      ] }) })
+    ] })
+  ] });
+}
+function CreateProfileCard({ onClick, t }) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: "ps-msp-card ps-msp-card-create", onClick, children: [
+    /* @__PURE__ */ jsx("div", { className: "ps-msp-create-icon", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "22", height: "22", children: [
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+      /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "ps-msp-create-title", children: t("Create New Profile") }),
+    /* @__PURE__ */ jsx("div", { className: "ps-msp-create-sub", children: t("ADD MEASUREMENTS & PHOTO") })
+  ] });
+}
+function SizeHistoryCard({ entry, profileName, t }) {
+  const date = new Date(entry.savedAt).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  return /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-card", children: [
+    entry.productImage && /* @__PURE__ */ jsx("div", { className: "ps-msp-history-thumb", children: /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: entry.productTitle }) }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-info", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-msp-history-name", children: entry.productTitle }),
+      profileName && /* @__PURE__ */ jsx("div", { className: "ps-msp-history-profile", children: profileName }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-meta", children: [
+        /* @__PURE__ */ jsx(ClockIcon, { size: 11 }),
+        " ",
+        date
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-size", children: [
+      /* @__PURE__ */ jsx("span", { className: "ps-msp-history-size-label", children: t("SIZE") }),
+      /* @__PURE__ */ jsx("span", { className: "ps-msp-history-size-value", children: entry.recommendedSize })
+    ] })
+  ] });
+}
+function MySizingProfilesView({
+  profiles,
+  activeProfileId,
+  onSelectProfile,
+  onEditProfile,
+  onCreateProfile,
+  onDeleteProfile,
+  onClose,
+  t
+}) {
+  const allHistory = useMemo(() => {
+    const items = [];
+    for (const p of profiles) {
+      for (const h of p.sizeHistory || []) {
+        items.push({ entry: h, profileName: p.name });
+      }
+    }
+    return items.sort((a, b) => b.entry.savedAt - a.entry.savedAt).slice(0, 12);
+  }, [profiles]);
+  return /* @__PURE__ */ jsxs("div", { className: "ps-msp-root", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-msp-topbar", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msp-back", onClick: onClose, "aria-label": t("Back"), children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+      /* @__PURE__ */ jsx("span", { className: "ps-msp-topbar-title", children: t("MY SIZING PROFILES") }),
+      /* @__PURE__ */ jsx("span", { className: "ps-msp-topbar-spacer" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-msp-scroll", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-msp-header", children: [
+        /* @__PURE__ */ jsx("h2", { className: "ps-msp-title", children: t("My Sizing Profiles") }),
+        /* @__PURE__ */ jsx("p", { className: "ps-msp-subtitle", children: t("Manage your bespoke silhouettes. Switch between profiles for different fits or create a new one for specific garment types.") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msp-grid", children: [
+        /* @__PURE__ */ jsx(CreateProfileCard, { onClick: onCreateProfile, t }),
+        profiles.map((p) => /* @__PURE__ */ jsx(
+          ProfileCard,
+          {
+            profile: p,
+            isActive: p.id === activeProfileId,
+            onSelect: () => onSelectProfile(p.id),
+            onEdit: () => onEditProfile(p),
+            t
+          },
+          p.id
+        ))
+      ] }),
+      allHistory.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-msp-history-section", children: [
+        /* @__PURE__ */ jsx("h3", { className: "ps-msp-history-title", children: t("Recent Size Calculations") }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msp-history-list", children: allHistory.map(({ entry, profileName }) => /* @__PURE__ */ jsx(SizeHistoryCard, { entry, profileName, t }, `${entry.productId}-${entry.savedAt}`)) })
+      ] })
+    ] })
+  ] });
+}
 function ResultView({ setView }) {
   useEffect(() => {
     setView("size-result");
@@ -7687,6 +8334,7 @@ if (typeof document !== "undefined") {
 function PrimeStyleTryonInner({
   productImage,
   productTitle = "Product",
+  productId,
   buttonText,
   apiUrl,
   showPoweredBy = true,
@@ -7706,6 +8354,7 @@ function PrimeStyleTryonInner({
   onError,
   sizeGuideData
 }) {
+  const effectiveProductId = productId || productImage;
   const [activeLocale, setActiveLocale] = useState(() => locale || "");
   useEffect(() => {
     if (locale !== void 0) setActiveLocale(locale);
@@ -7723,6 +8372,7 @@ function PrimeStyleTryonInner({
   const [sizingMethod, setSizingMethod] = useState(null);
   const [sizingResult, setSizingResult] = useState(null);
   const [sizingLoading, setSizingLoading] = useState(false);
+  const [estimationDone, setEstimationDone] = useState(false);
   const [tryOnProcessing, setTryOnProcessing] = useState(false);
   const [sizeGuide, setSizeGuide] = useState(null);
   const [sizeGuideFetching, setSizeGuideFetching] = useState(false);
@@ -7739,7 +8389,11 @@ function PrimeStyleTryonInner({
   const [estimationLoading, setEstimationLoading] = useState(false);
   const [profiles, setProfiles] = useState(() => lsGet("profiles", []));
   const [history, setHistory] = useState(() => lsGet("history", []));
-  const [activeProfileId, setActiveProfileId] = useState(null);
+  const [activeProfileId, setActiveProfileIdState] = useState(() => getActiveProfileId());
+  const setActiveProfileId$1 = useCallback((id) => {
+    setActiveProfileIdState(id);
+    setActiveProfileId(id);
+  }, []);
   const [profileSaved, setProfileSaved] = useState(false);
   const [drawer, setDrawer] = useState(null);
   const [profileDetail, setProfileDetail] = useState(null);
@@ -7878,6 +8532,69 @@ function PrimeStyleTryonInner({
         return 1;
     }
   }, [view]);
+  const persistResultToProfile = useCallback(
+    (formData, recommendation) => {
+      let targetId = activeProfileId;
+      let target = profiles.find((p) => p.id === targetId);
+      if (!target) {
+        const newProfile = {
+          id: Date.now().toString(36) + Math.random().toString(36).slice(2, 6),
+          name: formData.gender === "female" ? "My Profile" : "My Profile",
+          gender: formData.gender,
+          height: formData.height,
+          weight: formData.weight,
+          age: formData.age,
+          heightUnit: formData.heightUnit,
+          weightUnit: formData.weightUnit,
+          chestProfile: formData.chestProfile,
+          midsectionProfile: formData.midsectionProfile,
+          hipProfile: formData.hipProfile,
+          bandSize: formData.bandSize,
+          cupSize: formData.cupSize,
+          createdAt: Date.now(),
+          lastUsedAt: Date.now()
+        };
+        setProfiles((prev) => [newProfile, ...prev]);
+        setActiveProfileId$1(newProfile.id);
+        targetId = newProfile.id;
+        target = newProfile;
+      }
+      estimateFullMeasurements({
+        apiUrl,
+        height: formData.height,
+        weight: formData.weight,
+        heightUnit: formData.heightUnit,
+        weightUnit: formData.weightUnit,
+        gender: formData.gender,
+        age: formData.age,
+        chestProfile: formData.chestProfile,
+        midsectionProfile: formData.midsectionProfile,
+        hipProfile: formData.hipProfile,
+        bodyImage: formData.bodyImage
+      }).then((est) => {
+        if (!est || !targetId) return;
+        updateProfileMeasurements(targetId, est.estimates, est.unit);
+        setProfiles(lsGet("profiles", []));
+      }).catch(() => {
+      }).finally(() => setEstimationDone(true));
+      if (recommendation?.recommendedSize && targetId) {
+        const sectionsMap = recommendation.sections ? Object.fromEntries(
+          Object.entries(recommendation.sections).map(([name, sec]) => [name, sec.recommendedSize])
+        ) : void 0;
+        addSizeToHistory(targetId, {
+          productId: effectiveProductId,
+          productTitle,
+          productImage,
+          recommendedSize: recommendation.recommendedSize,
+          confidence: recommendation.confidence,
+          sections: sectionsMap,
+          savedAt: Date.now()
+        });
+        setProfiles(lsGet("profiles", []));
+      }
+    },
+    [activeProfileId, profiles, apiUrl, productImage, productTitle, effectiveProductId, setActiveProfileId$1]
+  );
   const applyProfileRef = useRef(() => {
   });
   const handleOpen = useCallback(() => {
@@ -8084,6 +8801,7 @@ function PrimeStyleTryonInner({
       if (formRef.current.hipProfile) qe.hipProfile = formRef.current.hipProfile;
       payload.quickEstimate = qe;
     }
+    setEstimationDone(false);
     try {
       const res = await fetch(`${baseUrl}/api/v1/sizing/recommend`, {
         method: "POST",
@@ -8095,20 +8813,39 @@ function PrimeStyleTryonInner({
         console.log("[PS-SDK] Sizing recommend RESULT:", JSON.stringify(data));
         setSizingResult(data);
         onComplete?.(data);
+        const m = payload.measurements || {};
+        const qe = payload.quickEstimate || {};
+        const src = method === "exact" ? m : qe;
+        persistResultToProfile(
+          {
+            gender: src.gender || "male",
+            height: Number(src.height || src.heightCm || 0),
+            weight: Number(src.weight || src.weightKg || 0),
+            heightUnit: src.heightUnit || "cm",
+            weightUnit: src.weightUnit || "kg",
+            age: src.age != null ? Number(src.age) : void 0,
+            chestProfile: src.chestProfile,
+            midsectionProfile: src.midsectionProfile,
+            hipProfile: src.hipProfile
+          },
+          data
+        );
       } else {
         const errBody = await res.text().catch(() => "");
         console.error("[PS-SDK] Sizing recommend failed:", res.status, errBody);
         setErrorMessage(t("Unable to get size recommendation. Please try again."));
         setView("error");
+        setEstimationDone(true);
       }
     } catch (err) {
       console.error("[PS-SDK] Sizing recommend network error:", err);
       setErrorMessage(t("Unable to connect to sizing service. Please try again."));
       setView("error");
+      setEstimationDone(true);
     } finally {
       setSizingLoading(false);
     }
-  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields]);
+  }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields, persistResultToProfile]);
   const handleQuickEstimate = useCallback(async (height, weight, heightUnit2, weightUnit2, gender, age, bodyType, chestProfile, midsectionProfile, hipProfile, bodyImage) => {
     if (!apiRef.current) return;
     getApiUrl(apiUrl);
@@ -8173,6 +8910,7 @@ function PrimeStyleTryonInner({
     setSizingResult(null);
     setResultImageUrl(null);
     setSizingLoading(true);
+    setEstimationDone(false);
     setView("size-result");
     modelPoseRef.current = null;
     setBodyLandmarks(null);
@@ -8211,11 +8949,26 @@ function PrimeStyleTryonInner({
         const recData = await recRes.json();
         setSizingResult(recData);
         onComplete?.(recData);
+        persistResultToProfile(
+          {
+            gender: data.gender,
+            height: data.height,
+            weight: data.weight,
+            heightUnit: data.heightUnit,
+            weightUnit: data.weightUnit,
+            age: data.age,
+            bodyImage: data.photoBase64
+          },
+          recData
+        );
+      } else {
+        setEstimationDone(true);
       }
     } catch {
+      setEstimationDone(true);
     }
     setSizingLoading(false);
-  }, [apiUrl, productImage, productTitle, sizingUnit, weightUnit, sizingCountry, sizeGuide, dynamicFields]);
+  }, [apiUrl, productImage, productTitle, sizingUnit, weightUnit, sizingCountry, sizeGuide, dynamicFields, persistResultToProfile]);
   const handleTryOnSubmit = useCallback(async () => {
     const file = selectedFile || selectedFileRef.current;
     if (!file || !apiRef.current || !sseRef.current) {
@@ -8407,7 +9160,7 @@ function PrimeStyleTryonInner({
   const applyProfile = useCallback((id) => {
     const p = profiles.find((pr) => pr.id === id);
     if (!p) return;
-    setActiveProfileId(id);
+    setActiveProfileId$1(id);
     setProfiles((prev) => prev.map((pr) => pr.id === id ? { ...pr, lastUsedAt: Date.now() } : pr));
     const fd = { gender: p.gender || "male" };
     if (p.height ?? p.heightCm) fd.height = String(p.height ?? p.heightCm);
@@ -8502,7 +9255,7 @@ function PrimeStyleTryonInner({
       }
       return [...prev, p].slice(-50);
     });
-    setActiveProfileId(id);
+    setActiveProfileId$1(id);
     setProfileSaved(true);
   }, [activeProfileId, sizingCountry, sizingUnit, heightUnit, weightUnit]);
   const saveHistoryEntry = useCallback(() => {
@@ -8717,6 +9470,7 @@ function PrimeStyleTryonInner({
         return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(
           SizeResultView,
           {
+            estimationDone,
             sizingLoading,
             sizingResult,
             sizeGuide,
@@ -8771,6 +9525,28 @@ function PrimeStyleTryonInner({
         ) }, "v-proc");
       case "result":
         return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(ResultView, { setView }) }, "v-result");
+      case "profiles":
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(
+          MySizingProfilesView,
+          {
+            profiles,
+            activeProfileId,
+            onSelectProfile: (id) => {
+              setActiveProfileId$1(id);
+              setView("body-profile");
+            },
+            onEditProfile: (p) => {
+              setProfileDetail(p);
+            },
+            onCreateProfile: () => {
+              setActiveProfileId$1(null);
+              setView("body-profile");
+            },
+            onDeleteProfile: (id) => setProfiles((prev) => prev.filter((p) => p.id !== id)),
+            onClose: () => setView("body-profile"),
+            t
+          }
+        ) }, "v-profiles");
       case "error":
         return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(
           ErrorView,
@@ -8794,7 +9570,7 @@ function PrimeStyleTryonInner({
       /* @__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" ? " ps-tryon-modal-wide" : ""}`, 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: () => setDrawer(drawer === "profiles" ? null : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
+          /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setView(view === "profiles" ? "body-profile" : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
           /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
           /* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
         ] }),
@@ -8833,7 +9609,7 @@ function PrimeStyleTryonInner({
         setProfileDetail,
         setProfiles,
         activeProfileId,
-        setActiveProfileId,
+        setActiveProfileId: setActiveProfileId$1,
         t
       }
     )
@@ -8842,6 +9618,53 @@ function PrimeStyleTryonInner({
 function PrimeStyleTryon(props) {
   return /* @__PURE__ */ jsx(PrimeStyleTryonInner, { ...props });
 }
+function usePrimeStyleSize(input) {
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [noProfile, setNoProfile] = useState(false);
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setNoProfile(false);
+    recommendForProduct(input).then((res) => {
+      if (cancelled) return;
+      if (res === null) {
+        setNoProfile(true);
+        setResult(null);
+      } else {
+        setResult(res);
+      }
+    }).catch(() => {
+      if (!cancelled) setResult(null);
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [input.productId, input.apiUrl, input.apiKey, tick]);
+  return {
+    recommendedSize: result?.recommendedSize ?? null,
+    sections: result?.sections ?? null,
+    loading,
+    noProfile,
+    result,
+    refetch: () => setTick((n) => n + 1)
+  };
+}
 export {
-  PrimeStyleTryon
+  PrimeStyleTryon,
+  addSizeToHistory,
+  estimateFullMeasurements,
+  getActiveProfile,
+  getActiveProfileId,
+  getCachedSize,
+  getProfiles,
+  recommendForProduct,
+  saveProfiles,
+  setActiveProfileId,
+  updateProfile,
+  updateProfileMeasurements,
+  usePrimeStyleSize
 };