@primestyleai/tryon 5.7.11 → 5.8.0

package/dist/react/index.js

@@ -634,14 +634,14 @@ const STYLES = `
   .ps-tryon-modal {
     background: var(--ps-modal-bg, #FFFFFF); color: var(--ps-modal-color, #1C1D1E);
     border-radius: var(--ps-modal-radius, 0.83vw); width: var(--ps-modal-width, 100%);
-    max-width: var(--ps-modal-max-width, 36vw); max-height: 92vh; overflow-y: auto;
+    max-width: var(--ps-modal-max-width, min(36vw, 560px)); max-height: min(92vh, 800px); overflow-y: auto;
     font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
     box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.08); animation: ps-slide-up 0.3s ease;
     scrollbar-width: thin; scrollbar-color: var(--ps-border-color) transparent;
     flex-shrink: 0;
   }
-  .ps-tryon-modal-wide { max-width: 55vw; width: 55vw; height: 70vh; max-height: 70vh; display: flex; flex-direction: column; overflow: visible; transition: height 0.45s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
-  .ps-tryon-modal-tall.ps-tryon-modal-wide { height: 88vh; max-height: 88vh; }
+  .ps-tryon-modal-wide { max-width: min(55vw, 900px); width: min(55vw, 900px); height: min(70vh, 680px); max-height: min(70vh, 680px); display: flex; flex-direction: column; overflow: visible; transition: height 0.45s cubic-bezier(0.32, 0.72, 0, 1), max-height 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
+  .ps-tryon-modal-tall.ps-tryon-modal-wide { height: min(88vh, 800px); max-height: min(88vh, 800px); }
   .ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
   @keyframes ps-slide-up { from { transform: translateY(1.04vw) scale(0.97); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
 
@@ -3683,11 +3683,11 @@ const STYLES = `
     overflow: hidden;
   }
   .ps-msc-stage-slot {
-    animation: ps-msc-stage-in 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+    animation: ps-msc-stage-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
   @keyframes ps-msc-stage-in {
-    from { opacity: 0; transform: translateY(14px); }
-    to   { opacity: 1; transform: translateY(0); }
+    0%   { opacity: 0; transform: translateY(18px); filter: blur(4px); }
+    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
   }
   .ps-msc-stage-title {
     font-size: 16px; font-weight: 700;
@@ -4249,6 +4249,86 @@ const STYLES = `
     border-color: var(--ps-accent);
     color: var(--ps-accent);
   }
+  .ps-msp-card-delete {
+    width: 36px; height: 36px;
+    background: var(--ps-bg-primary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    color: var(--ps-text-secondary); cursor: pointer;
+    transition: border-color 0.15s, color 0.15s;
+  }
+  .ps-msp-card-delete:hover {
+    border-color: #F87171;
+    color: #F87171;
+  }
+
+  /* Edit measurements modal */
+  .ps-msp-edit-overlay {
+    position: absolute; inset: 0; z-index: 100;
+    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
+    display: flex; align-items: center; justify-content: center;
+    padding: 16px; animation: ps-fade-in 0.2s ease;
+  }
+  .ps-msp-edit-modal {
+    background: var(--ps-bg-primary); border-radius: 14px;
+    width: 100%; max-width: 380px; padding: 20px;
+    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+    animation: ps-slide-up 0.25s ease;
+  }
+  .ps-msp-edit-header {
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 16px;
+  }
+  .ps-msp-edit-header h3 {
+    font-size: 16px; font-weight: 600; color: var(--ps-text-primary); margin: 0;
+  }
+  .ps-msp-edit-close {
+    background: none; border: none; color: var(--ps-text-secondary);
+    cursor: pointer; padding: 4px;
+  }
+  .ps-msp-edit-grid {
+    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
+    margin-bottom: 18px;
+  }
+  .ps-msp-edit-field {
+    display: flex; flex-direction: column; gap: 4px;
+  }
+  .ps-msp-edit-label {
+    font-size: 10px; font-weight: 600; text-transform: uppercase;
+    letter-spacing: 0.06em; color: var(--ps-text-muted);
+  }
+  .ps-msp-edit-input-wrap {
+    display: flex; align-items: center;
+    border: 1px solid var(--ps-border-color); border-radius: 8px;
+    overflow: hidden; background: var(--ps-bg-secondary);
+  }
+  .ps-msp-edit-input {
+    flex: 1; border: none; background: transparent; padding: 8px 10px;
+    font-size: 14px; color: var(--ps-text-primary); outline: none;
+    min-width: 0; -moz-appearance: textfield;
+  }
+  .ps-msp-edit-input::-webkit-inner-spin-button,
+  .ps-msp-edit-input::-webkit-outer-spin-button { -webkit-appearance: none; }
+  .ps-msp-edit-input:focus { box-shadow: inset 0 0 0 1px var(--ps-accent); }
+  .ps-msp-edit-unit {
+    font-size: 11px; color: var(--ps-text-muted); padding-right: 10px;
+    font-weight: 500; flex-shrink: 0;
+  }
+  .ps-msp-edit-actions {
+    display: flex; gap: 8px; justify-content: flex-end;
+  }
+  .ps-msp-edit-cancel {
+    padding: 8px 16px; font-size: 13px; font-weight: 500;
+    border: 1px solid var(--ps-border-color); border-radius: 8px;
+    background: transparent; color: var(--ps-text-secondary); cursor: pointer;
+  }
+  .ps-msp-edit-save {
+    padding: 8px 20px; font-size: 13px; font-weight: 600;
+    border: none; border-radius: 8px;
+    background: var(--ps-accent); color: #fff; cursor: pointer;
+  }
+  .ps-msp-edit-save:hover { opacity: 0.9; }
 
   /* "Create New Profile" empty card */
   .ps-msp-card-create {
@@ -8782,11 +8862,83 @@ function ProfileMeasurementsView({
     ] })
   ] });
 }
+function EditMeasurementsModal({
+  profile,
+  onSave,
+  onCancel,
+  t
+}) {
+  const m = profile.measurements || {};
+  const fields = [
+    { key: "bust", label: "Bust" },
+    { key: "waist", label: "Waist" },
+    { key: "hips", label: "Hips" },
+    { key: "shoulderWidth", label: "Shoulder" },
+    { key: "sleeveLength", label: "Sleeve" },
+    { key: "neckCircumference", label: "Neck" },
+    { key: "inseam", label: "Inseam" },
+    { key: "thighCircumference", label: "Thigh" }
+  ];
+  const [values, setValues] = useState(() => {
+    const init = {};
+    fields.forEach((f) => {
+      init[f.key] = m[f.key] != null ? String(Math.round(m[f.key] * 10) / 10) : "";
+    });
+    return init;
+  });
+  const unit = profile.measurementsUnit || "cm";
+  return /* @__PURE__ */ jsx("div", { className: "ps-msp-edit-overlay", onClick: onCancel, children: /* @__PURE__ */ jsxs("div", { className: "ps-msp-edit-modal", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-msp-edit-header", children: [
+      /* @__PURE__ */ jsx("h3", { children: t("Edit Measurements") }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msp-edit-close", onClick: onCancel, "aria-label": t("Close"), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "18", height: "18", children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ps-msp-edit-grid", children: fields.map((f) => /* @__PURE__ */ jsxs("label", { className: "ps-msp-edit-field", children: [
+      /* @__PURE__ */ jsx("span", { className: "ps-msp-edit-label", children: t(f.label) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msp-edit-input-wrap", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            step: "0.1",
+            className: "ps-msp-edit-input",
+            value: values[f.key] || "",
+            onChange: (e) => setValues((v) => ({ ...v, [f.key]: e.target.value })),
+            placeholder: "—"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ps-msp-edit-unit", children: unit })
+      ] })
+    ] }, f.key)) }),
+    /* @__PURE__ */ jsxs("div", { className: "ps-msp-edit-actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msp-edit-cancel", onClick: onCancel, children: t("Cancel") }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-msp-edit-save",
+          onClick: () => {
+            const updated = { ...profile.measurements || {} };
+            fields.forEach((f) => {
+              const v = parseFloat(values[f.key]);
+              if (!isNaN(v) && v > 0) updated[f.key] = v;
+            });
+            onSave(updated);
+          },
+          children: t("Save")
+        }
+      )
+    ] })
+  ] }) });
+}
 function ProfileCard({
   profile,
   isActive,
   onSelect,
   onEdit,
+  onDelete,
   onOpenDetail,
   t
 }) {
@@ -8848,6 +9000,13 @@ function ProfileCard({
           /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msp-card-edit", onClick: onEdit, "aria-label": t("Edit"), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
             /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
             /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+          ] }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "ps-msp-card-delete", onClick: (e) => {
+            e.stopPropagation();
+            if (confirm(t("Delete this profile?"))) onDelete();
+          }, "aria-label": t("Delete"), children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
+            /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+            /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
           ] }) })
         ] })
       ]
@@ -8877,79 +9036,99 @@ function MySizingProfilesView({
 }) {
   const [creating, setCreating] = useState(false);
   const [viewingId, setViewingId] = useState(null);
+  const [editingId, setEditingId] = useState(null);
   const viewingProfile = viewingId ? profiles.find((p) => p.id === viewingId) || null : null;
+  const editingProfile = editingId ? profiles.find((p) => p.id === editingId) || null : null;
   const handleSaveNewProfile = (data) => {
     onSaveNewProfile(data);
     setCreating(false);
   };
-  return /* @__PURE__ */ jsx("div", { className: "ps-msp-root", children: /* @__PURE__ */ jsx("div", { className: "ps-msp-scroll", children: viewingProfile ? (
-    /* ── Profile detail view (full body measurements) ── */
-    /* @__PURE__ */ jsx(
-      ProfileMeasurementsView,
-      {
-        profile: viewingProfile,
-        isActive: viewingProfile.id === activeProfileId,
-        onSelect: () => {
-          onSelectProfile(viewingProfile.id);
-          setViewingId(null);
-        },
-        onSaveMeasurements: (m) => onSaveProfileMeasurements(viewingProfile.id, m),
-        onDelete: () => {
-          onDeleteProfile(viewingProfile.id);
-          setViewingId(null);
-        },
-        onBack: () => setViewingId(null),
-        onSave: () => setViewingId(null),
-        t
-      }
-    )
-  ) : creating ? (
-    /* ── Multi-step create wizard (Identity → Silhouette) ── */
-    /* @__PURE__ */ jsx(
-      CreateProfileWizard,
-      {
-        onSave: (data) => {
-          handleSaveNewProfile(data);
-          setTimeout(() => {
-            const latest = typeof window !== "undefined" ? (() => {
-              try {
-                const raw = localStorage.getItem("primestyle_profiles");
-                if (raw) {
-                  const list = JSON.parse(raw);
-                  if (list.length > 0) return list[0].id;
+  return /* @__PURE__ */ jsxs("div", { className: "ps-msp-root", children: [
+    /* @__PURE__ */ jsx("div", { className: "ps-msp-scroll", children: viewingProfile ? (
+      /* ── Profile detail view (full body measurements) ── */
+      /* @__PURE__ */ jsx(
+        ProfileMeasurementsView,
+        {
+          profile: viewingProfile,
+          isActive: viewingProfile.id === activeProfileId,
+          onSelect: () => {
+            onSelectProfile(viewingProfile.id);
+            setViewingId(null);
+          },
+          onSaveMeasurements: (m) => onSaveProfileMeasurements(viewingProfile.id, m),
+          onDelete: () => {
+            onDeleteProfile(viewingProfile.id);
+            setViewingId(null);
+          },
+          onBack: () => setViewingId(null),
+          onSave: () => setViewingId(null),
+          t
+        }
+      )
+    ) : creating ? (
+      /* ── Multi-step create wizard (Identity → Silhouette) ── */
+      /* @__PURE__ */ jsx(
+        CreateProfileWizard,
+        {
+          onSave: (data) => {
+            handleSaveNewProfile(data);
+            setTimeout(() => {
+              const latest = typeof window !== "undefined" ? (() => {
+                try {
+                  const raw = localStorage.getItem("primestyle_profiles");
+                  if (raw) {
+                    const list = JSON.parse(raw);
+                    if (list.length > 0) return list[0].id;
+                  }
+                } catch {
                 }
-              } catch {
-              }
-              return null;
-            })() : null;
-            if (latest) setViewingId(latest);
-          }, 50);
+                return null;
+              })() : null;
+              if (latest) setViewingId(latest);
+            }, 50);
+          },
+          onCancel: () => setCreating(false),
+          t
+        }
+      )
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-msp-header", children: [
+        /* @__PURE__ */ jsx("h2", { className: "ps-msp-title", children: t("My Sizing Profiles") }),
+        /* @__PURE__ */ jsx("p", { className: "ps-msp-subtitle", children: t("Manage your bespoke silhouettes. Switch between profiles for different fits or create a new one for specific garment types.") })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msp-grid", children: [
+        /* @__PURE__ */ jsx(CreateProfileCard, { onClick: () => setCreating(true), t }),
+        profiles.map((p) => /* @__PURE__ */ jsx(
+          ProfileCard,
+          {
+            profile: p,
+            isActive: p.id === activeProfileId,
+            onSelect: () => onSelectProfile(p.id),
+            onEdit: () => setEditingId(p.id),
+            onDelete: () => {
+              onDeleteProfile(p.id);
+              if (viewingId === p.id) setViewingId(null);
+            },
+            onOpenDetail: () => setViewingId(p.id),
+            t
+          },
+          p.id
+        ))
+      ] })
+    ] }) }),
+    editingProfile && /* @__PURE__ */ jsx(
+      EditMeasurementsModal,
+      {
+        profile: editingProfile,
+        onSave: (m) => {
+          onSaveProfileMeasurements(editingProfile.id, m);
+          setEditingId(null);
         },
-        onCancel: () => setCreating(false),
+        onCancel: () => setEditingId(null),
         t
       }
     )
-  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "ps-msp-header", children: [
-      /* @__PURE__ */ jsx("h2", { className: "ps-msp-title", children: t("My Sizing Profiles") }),
-      /* @__PURE__ */ jsx("p", { className: "ps-msp-subtitle", children: t("Manage your bespoke silhouettes. Switch between profiles for different fits or create a new one for specific garment types.") })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ps-msp-grid", children: [
-      /* @__PURE__ */ jsx(CreateProfileCard, { onClick: () => setCreating(true), t }),
-      profiles.map((p) => /* @__PURE__ */ jsx(
-        ProfileCard,
-        {
-          profile: p,
-          isActive: p.id === activeProfileId,
-          onSelect: () => onSelectProfile(p.id),
-          onEdit: () => onEditProfile(p),
-          onOpenDetail: () => setViewingId(p.id),
-          t
-        },
-        p.id
-      ))
-    ] })
-  ] }) }) });
+  ] });
 }
 function ResultView({ setView }) {
   useEffect(() => {
@@ -9387,7 +9566,7 @@ function ImageOptionCard({
   );
 }
 const MALE_STEPS = ["basics", "chest", "midsection", "seat"];
-const FEMALE_STEPS = ["basics", "midsection", "seat", "hips", "bra"];
+const FEMALE_STEPS = ["basics", "midsection", "seat", "hips"];
 const BAND_SIZES = {
   US: ["28", "30", "32", "34", "36", "38", "40", "42", "44", "46", "48", "50", "52", "54", "56"],
   UK: ["28", "30", "32", "34", "36", "38", "40", "42", "44", "46", "48", "50", "52", "54", "56"],
@@ -10259,6 +10438,7 @@ function PrimeStyleTryonInner({
   const [profileSaved, setProfileSaved] = useState(false);
   const [drawer, setDrawer] = useState(null);
   const [profileDetail, setProfileDetail] = useState(null);
+  const prevViewRef = useRef(null);
   const fileInputRef = useRef(null);
   const apiRef = useRef(null);
   const sseRef = useRef(null);
@@ -10511,6 +10691,14 @@ function PrimeStyleTryonInner({
     onClose?.();
   }, [onClose, previewUrl]);
   const handleBack = useCallback(() => {
+    if (drawer) {
+      setDrawer(null);
+      if (prevViewRef.current) {
+        setView(prevViewRef.current);
+        prevViewRef.current = null;
+      }
+      return;
+    }
     switch (view) {
       case "body-profile":
         handleClose();
@@ -10532,13 +10720,13 @@ function PrimeStyleTryonInner({
         setView("body-profile");
         break;
       case "profiles":
-        setView("body-profile");
+        handleClose();
         break;
       default:
         handleClose();
         break;
     }
-  }, [view, activeSection, handleClose]);
+  }, [view, drawer, activeSection, handleClose]);
   const showBackButton = view !== "idle" && view !== "processing" && view !== "result" && view !== "welcome" && view !== "body-profile" && view !== "size-result";
   const handleFileSelect = useCallback((file) => {
     if (!isValidImageFile(file)) {
@@ -11529,7 +11717,14 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
           /* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
           /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => setView(view === "profiles" ? "body-profile" : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
-          /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
+          /* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => {
+            if (drawer === "history") {
+              setDrawer(null);
+            } else {
+              prevViewRef.current = view;
+              setDrawer("history");
+            }
+          }, children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
           /* @__PURE__ */ jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsx(XIcon, {}) })
         ] }),
         view !== "body-profile" && view !== "processing" && !(view === "size-result" && sizeGuide?.sections && Object.keys(sizeGuide.sections).length > 1) && /* @__PURE__ */ jsx(Stepper, { view, stepIndex }),