@primestyleai/tryon 5.6.10 → 5.6.12

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);
@@ -8612,6 +8633,7 @@ function BasicsStepMobile({
   onSwitchToScan,
   onNext,
   canProceed,
+  fastPathLabel,
   error,
   t
 }) {
@@ -8787,7 +8809,7 @@ function BasicsStepMobile({
           className: "ps-bpm-next-btn",
           onClick: onNext,
           disabled: !canProceed,
-          children: t("Next")
+          children: fastPathLabel || t("Next")
         }
       ),
       /* @__PURE__ */ jsx(
@@ -9058,6 +9080,8 @@ function BodyProfileView({
   setSizingUnit,
   onComplete,
   onSnapSubmit,
+  hasActiveProfileWithMeasurements = false,
+  onUseActiveProfile,
   onBack,
   t
 }) {
@@ -9469,8 +9493,9 @@ function BodyProfileView({
               switchToImperial,
               onUploadPhoto: () => setStep("photo"),
               onSwitchToScan: () => setStep("photo"),
-              onNext: handleNext,
+              onNext: hasActiveProfileWithMeasurements && onUseActiveProfile ? onUseActiveProfile : handleNext,
               canProceed: true,
+              fastPathLabel: hasActiveProfileWithMeasurements ? t("Find My Best Fit") : void 0,
               error,
               t
             },
@@ -9720,23 +9745,28 @@ function BodyProfileView({
         })(),
         error && /* @__PURE__ */ jsx("p", { className: "ps-bp-error", children: error })
       ] }, "step-bra"),
-      !(isMobile && step === "basics") && /* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
-        step !== "basics" ? /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: handleBackStep, type: "button", children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
-          " ",
-          t("Back")
-        ] }) : /* @__PURE__ */ jsx("span", {}),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `ps-bp-next-btn${!canProceed ? " ps-bp-btn-disabled" : ""}`,
-            onClick: handleNext,
-            disabled: !canProceed,
-            type: "button",
-            children: isLastStep ? t("Find My Size") : t("Next")
-          }
-        )
-      ] })
+      !(isMobile && step === "basics") && (() => {
+        const useProfileFast = step === "basics" && hasActiveProfileWithMeasurements && !!onUseActiveProfile;
+        const handleClick = useProfileFast ? onUseActiveProfile : handleNext;
+        const label = useProfileFast ? t("Find My Best Fit") : isLastStep ? t("Find My Size") : t("Next");
+        return /* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
+          step !== "basics" ? /* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: handleBackStep, type: "button", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
+            " ",
+            t("Back")
+          ] }) : /* @__PURE__ */ jsx("span", {}),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `ps-bp-next-btn${!useProfileFast && !canProceed ? " ps-bp-btn-disabled" : ""}`,
+              onClick: handleClick,
+              disabled: !useProfileFast && !canProceed,
+              type: "button",
+              children: label
+            }
+          )
+        ] });
+      })()
     ] })
   ] }) });
 }
@@ -10013,6 +10043,26 @@ function PrimeStyleTryonInner({
     },
     [activeProfileId, profiles, apiUrl, productImage, productTitle, effectiveProductId, setActiveProfileId$1]
   );
+  const handleUseActiveProfile = useCallback(() => {
+    const p = profiles.find((x) => x.id === activeProfileId);
+    if (!p || !p.measurements || Object.keys(p.measurements).length === 0) return;
+    setSizingResult(null);
+    setSizingLoading(true);
+    setEstimationDone(true);
+    setView("size-result");
+    recommendForProduct({
+      productId: effectiveProductId,
+      productTitle,
+      productImage,
+      sizeGuideData,
+      profile: p,
+      apiUrl,
+      skipCache: true
+    }).then((res) => {
+      if (res?.raw) setSizingResult(res.raw);
+    }).catch(() => {
+    }).finally(() => setSizingLoading(false));
+  }, [profiles, activeProfileId, effectiveProductId, productTitle, productImage, sizeGuideData, apiUrl]);
   const applyProfileRef = useRef(() => {
   });
   const handleOpen = useCallback(() => {
@@ -10840,6 +10890,11 @@ function PrimeStyleTryonInner({
             setWeightUnit,
             sizingUnit,
             setSizingUnit,
+            hasActiveProfileWithMeasurements: (() => {
+              const p = profiles.find((x) => x.id === activeProfileId);
+              return !!(p && p.measurements && Object.keys(p.measurements).length > 0);
+            })(),
+            onUseActiveProfile: handleUseActiveProfile,
             onComplete: (data) => {
               formRef.current.gender = data.gender;
               if (data.bandSize) formRef.current.bandSize = data.bandSize;
@@ -10956,6 +11011,10 @@ function PrimeStyleTryonInner({
               setActiveProfileId$1(id);
               setView("body-profile");
             },
+            onSaveProfileMeasurements: (id, measurements) => {
+              updateProfileMeasurements(id, measurements, profiles.find((x) => x.id === id)?.measurementsUnit || "cm");
+              setProfiles(lsGet("profiles", []));
+            },
             onEditProfile: (p) => {
               setProfileDetail(p);
             },