@primestyleai/tryon 5.6.10 → 5.6.11

package/dist/react/index.js

@@ -4002,40 +4002,18 @@ 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 {
-    position: relative;
-    height: 90px;
-    background: var(--ps-bg-secondary);
-    border-radius: 8px;
-    display: flex; align-items: center; justify-content: center;
-    margin-bottom: 22px;
-    color: var(--ps-text-secondary);
-    overflow: visible;
-  }
-  .ps-msp-card-thumb::after {
-    /* Clip the rectangle photo only, not the circle overlay */
-    content: ""; display: block;
-  }
-  .ps-msp-card-photo {
-    width: 100%; height: 100%; object-fit: cover; display: block;
-    border-radius: 8px;
-    /* Same head-bias crop as the profile detail avatar */
-    object-position: 50% 12%;
-  }
-  /* Circular profile avatar overlay — sits on the bottom-left of the
-     rectangular thumb, social-card style. Shows the head crop. */
+  /* Big circular profile avatar — only chrome on the card, no
+     rectangular hero. Shows the head crop via object-position 12%. */
   .ps-msp-card-circle {
-    position: absolute;
-    left: 12px; bottom: -18px;
-    width: 44px; height: 44px;
+    width: 110px; height: 110px;
     border-radius: 50%;
-    background: var(--ps-bg-primary);
-    border: 3px solid var(--ps-bg-primary);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    background: var(--ps-bg-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);
-    z-index: 2;
+    margin: 6px auto 14px;
   }
   .ps-msp-card-circle img {
     width: 100%; height: 100%; object-fit: cover;
@@ -4681,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;
   }
@@ -8250,7 +8253,7 @@ function ProfileMeasurementsView({
   profile,
   isActive,
   onSelect,
-  onEdit,
+  onSaveMeasurements,
   onDelete,
   onBack,
   onSave,
@@ -8260,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 "—";
@@ -8310,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")
             ] })
@@ -8357,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,
@@ -8400,10 +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__ */ jsxs("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: "" }) : /* @__PURE__ */ jsx(UserIcon, { size: 18 }) })
-        ] }),
+        /* @__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: [
@@ -8473,6 +8495,7 @@ function MySizingProfilesView({
   onSelectProfile,
   onEditProfile,
   onSaveNewProfile,
+  onSaveProfileMeasurements,
   onDeleteProfile,
   onClose,
   t
@@ -8504,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);
@@ -10954,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);