@primestyleai/tryon 5.6.9 → 5.6.11

package/dist/react/index.js

@@ -4002,18 +4002,21 @@ const STYLES = `
   .ps-msp-avatar { color: var(--ps-accent); border-color: var(--ps-accent); }
   .ps-msp-avatar-tag { background: var(--ps-accent); }
 
-  .ps-msp-card-thumb {
-    height: 90px;
+  /* Big circular profile avatar — only chrome on the card, no
+     rectangular hero. Shows the head crop via object-position 12%. */
+  .ps-msp-card-circle {
+    width: 110px; height: 110px;
+    border-radius: 50%;
     background: var(--ps-bg-secondary);
-    border-radius: 8px;
-    display: flex; align-items: center; justify-content: center;
-    margin-bottom: 12px;
-    color: var(--ps-text-secondary);
+    border: 3px solid var(--ps-accent);
+    box-shadow: 0 6px 18px rgba(33, 84, 239, 0.18);
     overflow: hidden;
+    display: flex; align-items: center; justify-content: center;
+    color: var(--ps-accent);
+    margin: 6px auto 14px;
   }
-  .ps-msp-card-photo {
-    width: 100%; height: 100%; object-fit: cover; display: block;
-    /* Same head-bias crop as the profile detail avatar */
+  .ps-msp-card-circle img {
+    width: 100%; height: 100%; object-fit: cover;
     object-position: 50% 12%;
   }
   .ps-msp-avatar {
@@ -4656,7 +4659,32 @@ const STYLES = `
     100% { background-position: -200% 0; }
   }
 
-  /* Saved sizes history (per-product cache) */
+  /* Inline measurement edit inputs */
+  .ps-pmv-measure.ps-editing {
+    border-color: var(--ps-accent);
+    background: rgba(33, 84, 239, 0.04);
+  }
+  .ps-pmv-measure-edit {
+    display: flex; align-items: baseline; gap: 4px;
+  }
+  .ps-pmv-measure-input {
+    flex: 1; min-width: 0;
+    background: transparent; border: none; outline: none;
+    font-family: inherit;
+    font-size: 18px; font-weight: 700;
+    color: var(--ps-text-primary);
+    padding: 0;
+    font-feature-settings: "tnum" 1;
+  }
+  .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;
   }
@@ -6055,17 +6083,25 @@ function MobileSkeleton({ landmarks, w, h }) {
 }
 function MobileScanningView({
   previewUrl,
+  productImage,
   bodyLandmarks,
   sizingDone,
   onSwitchToManual,
   t
 }) {
-  const stages = [
+  const displayImage = previewUrl || productImage || "";
+  const isPhotoMode = !!previewUrl;
+  const stages = isPhotoMode ? [
     { title: t("DETECTING POSE"), desc: t("Identifying body landmarks from your photo."), viewfinderText: t("DETECTING POSE") },
     { title: t("SCANNING FRAME"), desc: t("Our AI is mapping your proportions to calculate the perfect fit."), viewfinderText: t("SCANNING FRAME") },
     { title: t("ANALYZING BODY"), desc: t("Measuring shoulders, chest, waist and hips."), viewfinderText: t("ANALYZING") },
     { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the size guide."), viewfinderText: t("MATCHING SIZE") },
     { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation."), viewfinderText: t("FINALIZING") }
+  ] : [
+    { title: t("READING YOUR PROFILE"), desc: t("Loading your saved measurements and body shape answers."), viewfinderText: t("READING PROFILE") },
+    { title: t("ESTIMATING BODY"), desc: t("Computing chest, waist, hips, sleeve and inseam from your basics."), viewfinderText: t("ESTIMATING BODY") },
+    { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the garment's size guide."), viewfinderText: t("MATCHING SIZE") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation."), viewfinderText: t("FINALIZING") }
   ];
   const [dims, setDims] = useState({ w: 800, h: 1200 });
   const handleImgLoad = (e) => {
@@ -6075,7 +6111,7 @@ function MobileScanningView({
   const [stageIdx, setStageIdx] = useState(0);
   useEffect(() => {
     if (sizingDone) return;
-    if (bodyLandmarks && stageIdx === 0) {
+    if (isPhotoMode && bodyLandmarks && stageIdx === 0) {
       setStageIdx(1);
       return;
     }
@@ -6083,7 +6119,7 @@ function MobileScanningView({
       setStageIdx((i) => Math.min(i + 1, stages.length - 1));
     }, 1600);
     return () => clearInterval(id);
-  }, [bodyLandmarks, sizingDone, stageIdx, stages.length]);
+  }, [bodyLandmarks, sizingDone, stageIdx, stages.length, isPhotoMode]);
   const current = stages[stageIdx] ?? stages[0];
   const [feedTick, setFeedTick] = useState(1);
   useEffect(() => {
@@ -6098,10 +6134,10 @@ function MobileScanningView({
         "LIVE_FEED:",
         String(feedTick).padStart(2, "0")
       ] }),
-      /* @__PURE__ */ jsx(
+      displayImage && /* @__PURE__ */ jsx(
         "img",
         {
-          src: previewUrl,
+          src: displayImage,
           alt: t("Your photo"),
           className: "ps-msc-photo",
           onLoad: handleImgLoad
@@ -6114,7 +6150,7 @@ function MobileScanningView({
         /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-br" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "ps-msc-scanline" }),
-      bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) }),
+      isPhotoMode && bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-bottom", children: [
         /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-text", children: [
           current.viewfinderText,
@@ -7136,7 +7172,17 @@ function SizeResultView({
     previewUrl: !!previewUrl
   });
   return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr", children: [
-    isSizingOnly && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
+    isMobile && isSizingOnly && /* @__PURE__ */ jsx(
+      MobileScanningView,
+      {
+        productImage,
+        bodyLandmarks: null,
+        sizingDone,
+        onSwitchToManual: () => setView("body-profile"),
+        t
+      }
+    ),
+    !isMobile && isSizingOnly && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-img-col", children: /* @__PURE__ */ jsx("img", { src: productImage, alt: productTitle, className: "ps-tryon-sr-product-img" }) }),
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-right-col", style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "0.8vw" }, children: [
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
@@ -8207,7 +8253,7 @@ function ProfileMeasurementsView({
   profile,
   isActive,
   onSelect,
-  onEdit,
+  onSaveMeasurements,
   onDelete,
   onBack,
   onSave,
@@ -8217,6 +8263,33 @@ function ProfileMeasurementsView({
   const measurements = profile.measurements || {};
   const unit = profile.measurementsUnit || "cm";
   const hasMeasurements = Object.keys(measurements).some((k) => measurements[k] != null);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState({});
+  useEffect(() => {
+    if (!editing) return;
+    const next = {};
+    for (const f of fields) {
+      const v = measurements[f.key];
+      if (v != null) next[f.key] = String(Math.round(v * 10) / 10);
+    }
+    setDraft(next);
+  }, [editing]);
+  const handleDraftChange = (key, value) => {
+    setDraft((prev) => ({ ...prev, [key]: value }));
+  };
+  const handleEditSave = () => {
+    const updated = { ...measurements };
+    for (const [key, raw] of Object.entries(draft)) {
+      const v = parseFloat(raw);
+      if (!isNaN(v) && v > 0) updated[key] = v;
+    }
+    onSaveMeasurements(updated);
+    setEditing(false);
+  };
+  const handleEditCancel = () => {
+    setEditing(false);
+    setDraft({});
+  };
   const heightDisplay = (() => {
     const h = profile.height ?? profile.heightCm;
     if (!h) return "—";
@@ -8267,44 +8340,45 @@ function ProfileMeasurementsView({
             /* @__PURE__ */ jsx("span", { children: t("Calculating...") })
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-sub", children: hasMeasurements ? t("Calculated from your basics. Used to recommend the perfect size for any product.") : t("Our AI is computing your full body proportions — this usually takes a few seconds.") })
+        /* @__PURE__ */ jsx("div", { className: "ps-pmv-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 ? " ps-loading" : ""}`, children: [
+        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) }),
-          /* @__PURE__ */ jsx("div", { className: `ps-pmv-measure-value${v == null ? " ps-loading" : ""}`, children: v != null ? `${Math.round(v * 10) / 10} ${unit}` : "—" })
+          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);
       }) })
     ] }),
-    profile.sizeHistory && profile.sizeHistory.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-head", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-title", children: t("SAVED SIZES") }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-sub", children: t("Recommendations from this profile across products") })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "ps-pmv-history", children: profile.sizeHistory.slice(0, 6).map((entry) => /* @__PURE__ */ jsxs("div", { className: "ps-pmv-history-card", children: [
-        entry.productImage && /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-thumb", children: /* @__PURE__ */ jsx("img", { src: entry.productImage, alt: entry.productTitle }) }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-history-info", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-name", children: entry.productTitle }),
-          /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-meta", children: new Date(entry.savedAt).toLocaleDateString(void 0, { month: "short", day: "numeric" }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ps-pmv-history-size", children: entry.recommendedSize })
-      ] }, `${entry.productId}-${entry.savedAt}`)) })
-    ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-pmv-actions", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: onBack, children: t("Back") }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: editing ? handleEditCancel : onBack, children: editing ? t("Cancel") : t("Back") }),
       /* @__PURE__ */ jsxs("div", { className: "ps-pmv-actions-right", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-edit", onClick: onEdit, children: t("Edit") }),
-        /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-delete", onClick: onDelete, children: t("Delete") }),
-        !isActive && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: onSelect, children: t("USE THIS PROFILE") }),
+        !editing && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-edit", onClick: () => setEditing(true), children: t("Edit") }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-delete", onClick: onDelete, children: t("Delete") }),
+          !isActive && /* @__PURE__ */ jsx("button", { type: "button", className: "ps-pmv-btn-secondary", onClick: onSelect, children: t("USE THIS PROFILE") })
+        ] }),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             className: "ps-pmv-btn-primary",
-            onClick: onSave,
+            onClick: editing ? handleEditSave : onSave,
             disabled: !hasMeasurements,
-            children: hasMeasurements ? t("SAVE") : /* @__PURE__ */ jsxs(Fragment, { children: [
+            children: hasMeasurements ? editing ? t("SAVE CHANGES") : t("SAVE") : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "ps-pmv-btn-spinner" }),
               t("CALCULATING")
             ] })
@@ -8314,12 +8388,6 @@ function ProfileMeasurementsView({
     ] })
   ] });
 }
-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,
@@ -8357,7 +8425,7 @@ function ProfileCard({
       tabIndex: 0,
       children: [
         /* @__PURE__ */ jsx("div", { className: "ps-msp-card-header", children: /* @__PURE__ */ jsx("span", { className: "ps-msp-card-tag", children: isActive ? t("DEFAULT PROFILE") : profile.gender === "female" ? t("WOMEN'S FIT") : t("MEN'S FIT") }) }),
-        /* @__PURE__ */ jsx("div", { className: "ps-msp-card-thumb", children: profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: profile.name, className: "ps-msp-card-photo" }) : /* @__PURE__ */ jsx(ProfileAvatar, { gender: profile.gender }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msp-card-circle", children: profile.photoBase64 ? /* @__PURE__ */ jsx("img", { src: profile.photoBase64, alt: profile.name }) : /* @__PURE__ */ jsx(UserIcon, { size: 32 }) }),
         /* @__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: [
@@ -8427,6 +8495,7 @@ function MySizingProfilesView({
   onSelectProfile,
   onEditProfile,
   onSaveNewProfile,
+  onSaveProfileMeasurements,
   onDeleteProfile,
   onClose,
   t
@@ -8458,9 +8527,7 @@ function MySizingProfilesView({
           onSelectProfile(viewingProfile.id);
           setViewingId(null);
         },
-        onEdit: () => {
-          onEditProfile(viewingProfile);
-        },
+        onSaveMeasurements: (m) => onSaveProfileMeasurements(viewingProfile.id, m),
         onDelete: () => {
           onDeleteProfile(viewingProfile.id);
           setViewingId(null);
@@ -10908,7 +10975,34 @@ function PrimeStyleTryonInner({
             activeProfileId,
             onSelectProfile: (id) => {
               setActiveProfileId$1(id);
-              setView("body-profile");
+              const p = profiles.find((x) => x.id === id);
+              if (!p || !p.measurements || Object.keys(p.measurements).length === 0) {
+                setView("body-profile");
+                return;
+              }
+              setSizingResult(null);
+              setSizingLoading(true);
+              setEstimationDone(true);
+              setView("size-result");
+              recommendForProduct({
+                productId: effectiveProductId,
+                productTitle,
+                productImage,
+                sizeGuideData,
+                profile: p,
+                apiUrl,
+                skipCache: true
+                // always re-recommend on explicit profile select
+              }).then((res) => {
+                if (res?.raw) {
+                  setSizingResult(res.raw);
+                }
+              }).catch(() => {
+              }).finally(() => setSizingLoading(false));
+            },
+            onSaveProfileMeasurements: (id, measurements) => {
+              updateProfileMeasurements(id, measurements, profiles.find((x) => x.id === id)?.measurementsUnit || "cm");
+              setProfiles(lsGet("profiles", []));
             },
             onEditProfile: (p) => {
               setProfileDetail(p);