@primestyleai/tryon 5.10.179 → 5.10.180

package/dist/react/views/MySizingProfilesView.d.ts

@@ -11,6 +11,7 @@ interface MySizingProfilesViewProps {
     onDeleteProfile?: (id: string) => void;
     /** Called when user clicks delete — parent owns the confirmation modal */
     onRequestDelete: (id: string) => void;
+    onLogout: () => void;
     onClose: () => void;
     /** Forwarded to CreateProfileWizard for the pre-upload age check. */
     apiUrl?: string;
@@ -47,5 +48,5 @@ export declare function DeleteConfirmModal({ onConfirm, onCancel, t, }: {
     onCancel: () => void;
     t: TranslateFn;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MySizingProfilesView({ profiles, activeProfileId, onSelectProfile, onEditProfile, onSaveNewProfile, onSaveProfileMeasurements, onSaveBraSize, onRequestDelete, onClose, apiUrl, apiKey, onPhotoPreview, initialCreateDraft, onProfileDraftConsumed, onEstimateFromPhoto, estimatingProfileIds, t, onRegisterBackInterceptor, }: MySizingProfilesViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MySizingProfilesView({ profiles, activeProfileId, onSelectProfile, onEditProfile, onSaveNewProfile, onSaveProfileMeasurements, onSaveBraSize, onRequestDelete, onLogout, onClose, apiUrl, apiKey, onPhotoPreview, initialCreateDraft, onProfileDraftConsumed, onEstimateFromPhoto, estimatingProfileIds, t, onRegisterBackInterceptor, }: MySizingProfilesViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/storefront/primestyle-tryon.js

@@ -11404,6 +11404,14 @@ function setStoredProfileSession(session) {
   } catch {
   }
 }
+function clearStoredProfileSession() {
+  const storage = readStorage();
+  if (!storage) return;
+  try {
+    storage.removeItem(SESSION_KEY);
+  } catch {
+  }
+}
 function startSocialProfileLogin(provider, apiUrl) {
   if (typeof window === "undefined") {
     return Promise.reject(new Error("Social login must run in the browser."));
@@ -18158,7 +18166,56 @@ const STYLES = `
     overflow-y: auto; -webkit-overflow-scrolling: touch;
     padding: 4px;
   }
+  .ps-msp-home {
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: max(12px, 0.95vw);
+  }
+  .ps-msp-welcome-panel,
+  .ps-msp-cards-panel {
+    min-width: 0;
+    min-height: 0;
+    background: var(--ps-bg-primary);
+  }
+  .ps-msp-welcome-panel {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: max(12px, 1vw);
+    padding: max(12px, 1vw) 0 max(12px, 0.95vw);
+    border-bottom: 1px solid var(--ps-border-subtle);
+  }
+  .ps-msp-cards-panel {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex: 1;
+  }
+  .ps-msp-cards-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: max(4px, 0.35vw) 0 max(8px, 0.65vw);
+  }
   .ps-msp-header { margin-bottom: max(10px, 0.85vw); }
+  .ps-msp-header-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: max(10px, 0.8vw);
+  }
+  .ps-msp-header-copy { min-width: 0; }
+  .ps-msp-kicker {
+    font-size: max(9px, 0.58vw);
+    font-weight: 800;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--ps-accent);
+    margin-bottom: max(4px, 0.32vw);
+  }
   .ps-msp-title {
     font-size: max(13px, 0.95vw);
     font-weight: 700;
@@ -18167,16 +18224,56 @@ const STYLES = `
     letter-spacing: -0.005em;
   }
   .ps-msp-subtitle {
-    font-size: max(10px, 0.7vw);
+    font-size: max(11px, 0.72vw);
     color: var(--ps-text-muted);
-    margin: 0; line-height: 1.5;
+    margin: 0;
+    line-height: 1.55;
+    max-width: 54ch;
+  }
+  .ps-msp-header-actions {
+    display: flex;
+    align-items: center;
+    gap: max(8px, 0.65vw);
+    flex-shrink: 0;
+  }
+  .ps-msp-primary-create {
+    border: 0;
+    border-radius: 999px;
+    background: var(--ps-accent);
+    color: #FFFFFF;
+    font-family: inherit;
+    font-size: max(10px, 0.66vw);
+    font-weight: 800;
+    padding: max(7px, 0.52vw) max(11px, 0.8vw);
+    cursor: pointer;
+    transition: opacity 0.15s, transform 0.15s;
+  }
+  .ps-msp-primary-create:hover { opacity: 0.88; }
+  .ps-msp-primary-create:active { transform: scale(0.98); }
+  .ps-msp-logout {
+    flex-shrink: 0;
+    border: 1px solid var(--ps-border-color);
+    border-radius: 999px;
+    background: #FFFFFF;
+    color: #DC2626;
+    font-family: inherit;
+    font-size: max(10px, 0.62vw);
+    font-weight: 700;
+    padding: max(6px, 0.42vw) max(9px, 0.68vw);
+    cursor: pointer;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+  }
+  .ps-msp-logout:hover {
+    border-color: #DC2626;
+    color: #B91C1C;
+    background: #FEF2F2;
   }
 
   /* Card grid — compact saved profile cards */
   .ps-msp-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(max(140px, 11vw), 1fr));
-    gap: max(8px, 0.7vw);
+    grid-template-columns: repeat(auto-fill, minmax(max(160px, 12vw), 1fr));
+    gap: max(10px, 0.8vw);
     margin-bottom: max(14px, 1.2vw);
   }
   .ps-msp-card {
@@ -18477,27 +18574,28 @@ const STYLES = `
   }
   /* When create card is the only item (no saved profiles), make it wider */
   .ps-msp-grid > .ps-msp-card-create:only-child {
-    grid-column: 1 / -1;
-    min-height: max(160px, 12vw);
-    max-width: 380px;
-    margin: 0 auto;
+    grid-column: auto;
+    width: max(150px, 12vw);
+    min-height: max(96px, 7.4vw);
+    max-width: max(150px, 12vw);
+    margin: 0;
   }
   .ps-msp-create-icon {
-    width: max(32px, 2.6vw);
-    height: max(32px, 2.6vw);
+    width: max(28px, 2.2vw);
+    height: max(28px, 2.2vw);
     background: var(--ps-accent); color: #FFFFFF;
     border-radius: max(4px, 0.35vw);
     display: flex; align-items: center; justify-content: center;
     margin-bottom: max(6px, 0.55vw);
   }
   .ps-msp-create-title {
-    font-size: max(11px, 0.78vw);
+    font-size: max(10px, 0.68vw);
     font-weight: 700;
     color: var(--ps-text-primary);
     margin-bottom: max(2px, 0.2vw);
   }
   .ps-msp-create-sub {
-    font-size: max(8px, 0.55vw);
+    font-size: max(7px, 0.46vw);
     font-weight: 700;
     letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-muted);
@@ -18767,11 +18865,34 @@ const STYLES = `
 
   @media (max-width: 768px) {
     /* Profile card grid */
+    .ps-msp-home {
+      height: auto;
+      gap: 3vw;
+    }
+    .ps-msp-welcome-panel {
+      gap: 3vw;
+      padding: 3vw 0;
+    }
+    .ps-msp-cards-scroll {
+      max-height: 66vh;
+      padding: 1vw 0 3vw;
+    }
+    .ps-msp-header-actions { width: 100%; gap: 2vw; }
+    .ps-msp-primary-create { font-size: 3vw; padding: 2.4vw 3.4vw; }
+    .ps-msp-header-actions .ps-msp-primary-create { flex: 1; }
     .ps-msp-grid { grid-template-columns: 1fr; gap: 3vw; }
     .ps-msp-card-create { min-height: 22vw; }
+    .ps-msp-grid > .ps-msp-card-create:only-child {
+      width: 46vw;
+      max-width: 46vw;
+      min-height: 30vw;
+    }
     .ps-msp-header { margin-bottom: 3vw; }
+    .ps-msp-header-row { align-items: flex-start; gap: 3vw; }
+    .ps-msp-kicker { font-size: 2.4vw; margin-bottom: 1vw; }
     .ps-msp-title { font-size: 5.6vw; }
     .ps-msp-subtitle { font-size: 3vw; }
+    .ps-msp-logout { font-size: 2.8vw; padding: 2vw 2.8vw; }
     .ps-msp-card { padding: 3.5vw; border-radius: 3vw; }
     .ps-msp-card-tag { font-size: 2.3vw; padding: 1vw 2vw; border-radius: 1vw; }
     .ps-msp-card-circle { width: 18vw; height: 18vw; margin: 2vw auto 3vw; }
@@ -28053,6 +28174,7 @@ function MySizingProfilesView({
   onSaveProfileMeasurements,
   onSaveBraSize,
   onRequestDelete,
+  onLogout,
   onClose,
   apiUrl,
   apiKey,
@@ -28064,18 +28186,9 @@ function MySizingProfilesView({
   t: t2,
   onRegisterBackInterceptor
 }) {
-  const [creating, setCreating] = reactExports.useState(() => !!initialCreateDraft);
+  const [creating, setCreating] = reactExports.useState(false);
   const [viewingId, setViewingId] = reactExports.useState(null);
-  const handledDraftKeyRef = reactExports.useRef(initialCreateDraft?.createdAt ?? null);
   const viewingProfile = viewingId ? profiles.find((p2) => p2.id === viewingId) || null : null;
-  reactExports.useEffect(() => {
-    if (!initialCreateDraft) return;
-    const draftKey = initialCreateDraft.createdAt ?? "draft";
-    if (handledDraftKeyRef.current === draftKey && creating) return;
-    handledDraftKeyRef.current = draftKey;
-    setViewingId(null);
-    setCreating(true);
-  }, [creating, initialCreateDraft]);
   reactExports.useEffect(() => {
     if (viewingId && !profiles.find((p2) => p2.id === viewingId)) {
       setViewingId(null);
@@ -28146,12 +28259,19 @@ function MySizingProfilesView({
       t: t2
     },
     `create-${initialCreateDraft?.createdAt ?? "blank"}`
-  ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-header", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-msp-title", children: t2("My Sizing Profiles") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-msp-subtitle", children: t2("Manage your bespoke silhouettes. Switch between profiles for different fits or create a new one for specific garment types.") })
+  ) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-home", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "ps-msp-welcome-panel", "aria-label": t2("Profile welcome"), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msp-kicker", children: t2("Welcome") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-msp-title", children: t2("My Sizing Profiles") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-msp-subtitle", children: profiles.length > 0 ? t2("Choose a saved profile or create a new one before finding your best fit.") : t2("Create your first fit profile to save your measurements, photo, and size history.") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-header-actions", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-msp-primary-create", onClick: () => setCreating(true), children: t2("Create New Profile") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-msp-logout", onClick: onLogout, children: t2("Sign out") })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-grid", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("section", { className: "ps-msp-cards-panel", "aria-label": t2("Your profiles"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msp-cards-scroll", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-grid", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(CreateProfileCard, { onClick: () => setCreating(true), t: t2 }),
       profiles.map((p2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProfileCard,
@@ -28166,7 +28286,7 @@ function MySizingProfilesView({
         },
         p2.id
       ))
-    ] })
+    ] }) }) })
   ] }) }) });
 }
 const googleIcon = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3e%3cpath%20fill='%23FFC107'%20d='M43.6%2020.5H42V20H24v8h11.3C33.7%2032.7%2029.3%2036%2024%2036c-6.6%200-12-5.4-12-12s5.4-12%2012-12c3.1%200%205.9%201.2%208%203.1l5.7-5.7C34.1%206.1%2029.3%204%2024%204%2012.9%204%204%2012.9%204%2024s8.9%2020%2020%2020%2020-8.9%2020-20c0-1.3-.1-2.4-.4-3.5z'/%3e%3cpath%20fill='%23FF3D00'%20d='M6.3%2014.7l6.6%204.8C14.7%2015.1%2019%2012%2024%2012c3.1%200%205.9%201.2%208%203.1l5.7-5.7C34.1%206.1%2029.3%204%2024%204%2016.2%204%209.5%208.5%206.3%2014.7z'/%3e%3cpath%20fill='%234CAF50'%20d='M24%2044c5.2%200%209.9-2%2013.4-5.2l-6.2-5.2C29.2%2035.1%2026.7%2036%2024%2036c-5.2%200-9.6-3.3-11.3-7.8l-6.5%205C9.4%2039.6%2016.1%2044%2024%2044z'/%3e%3cpath%20fill='%231976D2'%20d='M43.6%2020.5H42V20H24v8h11.3c-.8%202.3-2.3%204.2-4.1%205.6l6.2%205.2C36.9%2039.2%2044%2034%2044%2024c0-1.3-.1-2.4-.4-3.5z'/%3e%3c/svg%3e";
@@ -32635,6 +32755,12 @@ function PrimeStyleTryonInner({
       setProfileAuthLoadingProvider(null);
     }
   }, [activeProfileId, apiUrl, hydrateProfileStore, profiles, t2]);
+  const handleProfileLogout = reactExports.useCallback(() => {
+    clearStoredProfileSession();
+    setProfileSession(null);
+    setProfileAuthError(null);
+    setProfileAuthLoadingProvider(null);
+  }, []);
   const fileInputRef = reactExports.useRef(null);
   const apiRef = reactExports.useRef(null);
   const sseRef = reactExports.useRef(null);
@@ -34930,6 +35056,7 @@ function PrimeStyleTryonInner({
               lsSet("profiles", lsGet("profiles", []).filter((p2) => p2.id !== id2));
             },
             onRequestDelete: (id2) => setDeleteConfirmId(id2),
+            onLogout: handleProfileLogout,
             onClose: () => setView("body-profile"),
             onRegisterBackInterceptor: handleRegisterProfilesBack,
             t: t2

package/package.json

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