@primestyleai/tryon 5.6.6 → 5.6.8

package/dist/react/components/ProfileDetailModal.d.ts

@@ -1,5 +1,13 @@
 import type { TranslateFn } from "../../i18n";
 import type { Profile } from "../types";
+/**
+ * Edit profile dialog — opens as a dark overlay ABOVE the main modal
+ * (z-index matches the .ps-tryon-overlay max-int so it always stacks
+ * on top). Wraps ProfileEditView so the user gets a real editable form
+ * with name + gender + units + height/weight/age + Save / Cancel.
+ *
+ * Portaled to document.body so parent stacking contexts can't clip it.
+ */
 export declare function ProfileDetailModal({ profileDetail, setProfileDetail, setProfiles, activeProfileId, setActiveProfileId, t, }: {
     profileDetail: Profile | null;
     setProfileDetail: (p: Profile | null) => void;
@@ -7,4 +15,4 @@ export declare function ProfileDetailModal({ profileDetail, setProfileDetail, se
     activeProfileId: string | null;
     setActiveProfileId: (id: string | null) => void;
     t: TranslateFn;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").ReactPortal | null;

package/dist/react/index.js

@@ -2805,15 +2805,28 @@ const STYLES = `
   }
   .ps-tryon-drawer-clear:hover { color: var(--ps-error-color); }
 
-  /* Profile detail modal */
+  /* Profile detail modal — portaled to body, sits ABOVE the main modal
+     overlay (which has z-index 2147483647). Equal z-index + later DOM
+     order means this stacks on top. Same trick as the language dropdown. */
   .ps-tryon-detail-overlay {
     position: fixed; inset: 0; background: rgba(0,0,0,0.55);
     display: flex; align-items: center; justify-content: center;
-    z-index: 9999999; padding: 0.83vw; animation: ps-fade-in 0.2s ease;
+    z-index: 2147483647; padding: 0.83vw; animation: ps-fade-in 0.2s ease;
+    isolation: isolate;
+    --ps-accent: #3B82F6;
+    --ps-accent-hover: #2563EB;
+    --ps-text-primary: #1C1D1E;
+    --ps-text-secondary: #454545;
+    --ps-text-muted: #84898C;
+    --ps-border-color: #E7E7E7;
+    --ps-border-subtle: #F0F0F0;
+    --ps-bg-primary: #FFFFFF;
+    --ps-bg-secondary: #F8FAFF;
+    --ps-error-color: #E7000B;
   }
   .ps-tryon-detail-modal {
-    background: var(--ps-bg-primary); border-radius: 0.83vw; width: 100%; max-width: 23vw; max-height: 85vh;
-    overflow-y: auto; box-shadow: 0 1.67vw 3.33vw rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
+    background: var(--ps-bg-primary); border-radius: 14px; width: 100%; max-width: 480px; max-height: 85vh;
+    overflow-y: auto; box-shadow: 0 24px 64px rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
     font-family: var(--ps-modal-font, system-ui, sans-serif); color: var(--ps-text-primary);
   }
   .ps-tryon-detail-header {
@@ -3851,6 +3864,8 @@ const STYLES = `
   }
   .ps-msp-card-photo {
     width: 100%; height: 100%; object-fit: cover; display: block;
+    /* Same head-bias crop as the profile detail avatar */
+    object-position: 50% 12%;
   }
   .ps-msp-avatar {
     position: relative;
@@ -4045,15 +4060,17 @@ const STYLES = `
      ════════════════════════════════════════════════════════════════ */
   .ps-cpw-root {
     display: flex; flex-direction: column;
-    gap: 20px; padding: 4px 4px 24px;
+    height: 100%; min-height: 0;
+    margin: 0 -16px;
   }
 
-  /* Step header — eyebrow + title + progress */
+  /* Step header — sticky at top */
   .ps-cpw-step-head {
     display: flex; align-items: flex-start; justify-content: space-between;
     gap: 16px;
-    padding-bottom: 18px;
+    padding: 4px 16px 18px;
     border-bottom: 1px solid var(--ps-border-subtle);
+    flex-shrink: 0;
   }
   .ps-cpw-eyebrow {
     font-size: 10px; font-weight: 700;
@@ -4091,6 +4108,9 @@ const STYLES = `
   .ps-cpw-body {
     display: flex; flex-direction: column;
     gap: 24px;
+    flex: 1; min-height: 0;
+    overflow-y: auto; -webkit-overflow-scrolling: touch;
+    padding: 18px 16px 24px;
   }
 
   /* Step 1 — Identity form */
@@ -4177,7 +4197,8 @@ const STYLES = `
   }
   .ps-cpw-photo-upload {
     display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: 6px; padding: 22px;
+    gap: 8px; padding: 38px 18px;
+    min-height: 220px;
     background: var(--ps-bg-secondary);
     border: 2px dashed var(--ps-border-color);
     border-radius: 12px;
@@ -4282,13 +4303,14 @@ const STYLES = `
     color: var(--ps-accent);
   }
 
-  /* Footer actions */
+  /* Footer actions — sticky at the bottom */
   .ps-cpw-footer {
     display: flex; align-items: center; justify-content: space-between;
     gap: 12px;
-    padding-top: 18px;
+    padding: 16px 16px;
     border-top: 1px solid var(--ps-border-subtle);
-    margin-top: 4px;
+    background: var(--ps-bg-primary);
+    flex-shrink: 0;
   }
   .ps-cpw-back-btn {
     background: none; border: none;
@@ -4355,6 +4377,11 @@ const STYLES = `
   }
   .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 {
@@ -5335,7 +5362,10 @@ function LangSwitcher({ activeLocale: current, onSelect }) {
             position: "fixed",
             top: pos.top,
             right: pos.right,
-            zIndex: 9999999
+            // Match the overlay's z-index (2147483647) so the dropdown sits
+            // above it. With equal z-index, document order wins — and the
+            // dropdown is portaled later than the overlay so it stacks on top.
+            zIndex: 2147483647
           },
           children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-lang-list", children: SUPPORTED_LOCALES.map((code) => /* @__PURE__ */ jsxs(
             "button",
@@ -5585,60 +5615,59 @@ function ProfileDetailModal({
   setActiveProfileId: setActiveProfileId2,
   t
 }) {
+  useEffect(() => {
+    if (!profileDetail || typeof document === "undefined") return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [profileDetail]);
   if (!profileDetail) return null;
-  const p = profileDetail;
-  const measurements = [
-    { label: t("Height"), value: p.heightCm, unit: t("cm") },
-    { label: t("Weight"), value: p.weightKg, unit: t("kg") },
-    { label: t("Chest"), value: p.chest, unit: t("cm") },
-    { label: t("Bust"), value: p.bust, unit: t("cm") },
-    { label: t("Waist"), value: p.waist, unit: t("cm") },
-    { label: t("Hips"), value: p.hips, unit: t("cm") },
-    { label: t("Shoulders"), value: p.shoulderWidth, unit: t("cm") },
-    { label: t("Sleeve"), value: p.sleeveLength, unit: t("cm") },
-    { label: t("Inseam"), value: p.inseam, unit: t("cm") },
-    { label: t("Neck"), value: p.neckCircumference, unit: t("cm") },
-    { label: t("Foot"), value: p.footLengthCm, unit: t("cm") },
-    { label: t("Shoe EU"), value: p.shoeEU ? Number(p.shoeEU) : void 0, unit: "" },
-    { label: t("Shoe US"), value: p.shoeUS ? Number(p.shoeUS) : void 0, unit: "" },
-    { label: t("Shoe UK"), value: p.shoeUK ? Number(p.shoeUK) : void 0, unit: "" }
-  ].filter((m) => m.value);
-  return /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-overlay", onClick: (e) => {
-    if (e.target === e.currentTarget) setProfileDetail(null);
-  }, children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-modal", children: [
-    /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-header", children: [
-      /* @__PURE__ */ jsx("span", { children: p.name }),
-      /* @__PURE__ */ jsx("button", { onClick: () => setProfileDetail(null), children: /* @__PURE__ */ jsx(XIcon, { size: 18 }) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-body", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-gender", children: [
-        /* @__PURE__ */ jsx(UserIcon, { size: 18 }),
-        " ",
-        p.gender === "female" ? t("Women's Profile") : t("Men's Profile")
-      ] }),
-      measurements.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-grid", children: measurements.map((m) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-cell", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-cell-label", children: m.label }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-cell-value", children: [
-          Math.round(m.value),
-          m.unit ? ` ${m.unit}` : ""
+  if (typeof document === "undefined") return null;
+  const handleSave = (updated) => {
+    setProfiles((prev) => prev.map(
+      (p) => p.id === profileDetail.id ? {
+        ...p,
+        ...updated,
+        // Keep id + createdAt + sizeHistory + measurements; bump lastEditedAt
+        id: p.id,
+        createdAt: p.createdAt,
+        sizeHistory: p.sizeHistory,
+        measurements: p.measurements,
+        lastEditedAt: Date.now()
+      } : p
+    ));
+    setProfileDetail(null);
+  };
+  const handleClose = () => setProfileDetail(null);
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "ps-tryon-detail-overlay",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) handleClose();
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-modal", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-header", children: [
+            /* @__PURE__ */ jsx("span", { children: t("Edit Profile") }),
+            /* @__PURE__ */ jsx("button", { onClick: handleClose, "aria-label": t("Close"), children: /* @__PURE__ */ jsx(XIcon, { size: 18 }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-detail-body", children: /* @__PURE__ */ jsx(
+            ProfileEditView,
+            {
+              profile: profileDetail,
+              onSave: handleSave,
+              onCancel: handleClose,
+              t
+            }
+          ) })
         ] })
-      ] }, m.label)) }),
-      p.createdAt && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-detail-date", children: [
-        t("Saved"),
-        " ",
-        new Date(p.createdAt).toLocaleDateString()
-      ] }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-detail-delete", onClick: () => {
-        setProfiles((prev) => prev.filter((x) => x.id !== p.id));
-        if (activeProfileId === p.id) setActiveProfileId2(null);
-        setProfileDetail(null);
-      }, children: [
-        /* @__PURE__ */ jsx(TrashIcon, {}),
-        " ",
-        t("Delete Profile")
-      ] })
-    ] })
-  ] }) });
+      }
+    ),
+    document.body
+  );
 }
 function WelcomeView({
   productImage,
@@ -7687,6 +7716,10 @@ function ShapeSection({
 }
 function CreateProfileWizard({ onSave, onCancel, t }) {
   const [step, setStep] = useState(1);
+  const bodyScrollRef = useRef(null);
+  useEffect(() => {
+    if (bodyScrollRef.current) bodyScrollRef.current.scrollTop = 0;
+  }, [step]);
   const [name, setName] = useState("");
   const [gender, setGender] = useState("male");
   const [unit, setUnit] = useState("cm");
@@ -7804,7 +7837,7 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ps-cpw-body", children: step === 1 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-identity", children: [
+    /* @__PURE__ */ jsx("div", { className: "ps-cpw-body", ref: bodyScrollRef, children: step === 1 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-identity", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
         /* @__PURE__ */ jsx("label", { className: "ps-cpw-field-label", children: t("PROFILE NAME") }),
         /* @__PURE__ */ jsx(