@primestyleai/tryon 5.7.11 → 5.8.1

package/dist/storefront/primestyle-tryon.js

@@ -13107,11 +13107,11 @@ const STYLES$1 = `
     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;
@@ -13673,6 +13673,86 @@ const STYLES$1 = `
     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 {
@@ -18206,11 +18286,83 @@ function ProfileMeasurementsView({
     ] })
   ] });
 }
+function EditMeasurementsModal({
+  profile,
+  onSave,
+  onCancel,
+  t: t2
+}) {
+  const m2 = 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] = reactExports.useState(() => {
+    const init = {};
+    fields.forEach((f2) => {
+      init[f2.key] = m2[f2.key] != null ? String(Math.round(m2[f2.key] * 10) / 10) : "";
+    });
+    return init;
+  });
+  const unit = profile.measurementsUnit || "cm";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msp-edit-overlay", onClick: onCancel, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-edit-modal", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-edit-header", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { children: t2("Edit Measurements") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-msp-edit-close", onClick: onCancel, "aria-label": t2("Close"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "18", height: "18", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msp-edit-grid", children: fields.map((f2) => /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "ps-msp-edit-field", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msp-edit-label", children: t2(f2.label) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-edit-input-wrap", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            type: "number",
+            step: "0.1",
+            className: "ps-msp-edit-input",
+            value: values[f2.key] || "",
+            onChange: (e) => setValues((v2) => ({ ...v2, [f2.key]: e.target.value })),
+            placeholder: "—"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-msp-edit-unit", children: unit })
+      ] })
+    ] }, f2.key)) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-edit-actions", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-msp-edit-cancel", onClick: onCancel, children: t2("Cancel") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ps-msp-edit-save",
+          onClick: () => {
+            const updated = { ...profile.measurements || {} };
+            fields.forEach((f2) => {
+              const v2 = parseFloat(values[f2.key]);
+              if (!isNaN(v2) && v2 > 0) updated[f2.key] = v2;
+            });
+            onSave(updated);
+          },
+          children: t2("Save")
+        }
+      )
+    ] })
+  ] }) });
+}
 function ProfileCard({
   profile,
   isActive,
   onSelect,
   onEdit,
+  onDelete,
   onOpenDetail,
   t: t2
 }) {
@@ -18272,6 +18424,13 @@ function ProfileCard({
           /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-msp-card-edit", onClick: onEdit, "aria-label": t2("Edit"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
             /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "ps-msp-card-delete", onClick: (e) => {
+            e.stopPropagation();
+            if (confirm(t2("Delete this profile?"))) onDelete();
+          }, "aria-label": t2("Delete"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "14", height: "14", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "3 6 5 6 21 6" }),
+            /* @__PURE__ */ jsxRuntimeExports.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" })
           ] }) })
         ] })
       ]
@@ -18301,79 +18460,99 @@ function MySizingProfilesView({
 }) {
   const [creating, setCreating] = reactExports.useState(false);
   const [viewingId, setViewingId] = reactExports.useState(null);
+  const [editingId, setEditingId] = reactExports.useState(null);
   const viewingProfile = viewingId ? profiles.find((p2) => p2.id === viewingId) || null : null;
+  const editingProfile = editingId ? profiles.find((p2) => p2.id === editingId) || null : null;
   const handleSaveNewProfile = (data) => {
     onSaveNewProfile(data);
     setCreating(false);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msp-root", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msp-scroll", children: viewingProfile ? (
-    /* ── Profile detail view (full body measurements) ── */
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ProfileMeasurementsView,
-      {
-        profile: viewingProfile,
-        isActive: viewingProfile.id === activeProfileId,
-        onSelect: () => {
-          onSelectProfile(viewingProfile.id);
-          setViewingId(null);
-        },
-        onSaveMeasurements: (m2) => onSaveProfileMeasurements(viewingProfile.id, m2),
-        onDelete: () => {
-          onDeleteProfile(viewingProfile.id);
-          setViewingId(null);
-        },
-        onBack: () => setViewingId(null),
-        onSave: () => setViewingId(null),
-        t: t2
-      }
-    )
-  ) : creating ? (
-    /* ── Multi-step create wizard (Identity → Silhouette) ── */
-    /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-root", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-msp-scroll", children: viewingProfile ? (
+      /* ── Profile detail view (full body measurements) ── */
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ProfileMeasurementsView,
+        {
+          profile: viewingProfile,
+          isActive: viewingProfile.id === activeProfileId,
+          onSelect: () => {
+            onSelectProfile(viewingProfile.id);
+            setViewingId(null);
+          },
+          onSaveMeasurements: (m2) => onSaveProfileMeasurements(viewingProfile.id, m2),
+          onDelete: () => {
+            onDeleteProfile(viewingProfile.id);
+            setViewingId(null);
+          },
+          onBack: () => setViewingId(null),
+          onSave: () => setViewingId(null),
+          t: t2
+        }
+      )
+    ) : creating ? (
+      /* ── Multi-step create wizard (Identity → Silhouette) ── */
+      /* @__PURE__ */ jsxRuntimeExports.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: t2
+        }
+      )
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-msp-title", children: t2("My Sizing Profiles") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-msp-subtitle", children: t2("Manage your bespoke silhouettes. Switch between profiles for different fits or create a new one for specific garment types.") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-grid", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CreateProfileCard, { onClick: () => setCreating(true), t: t2 }),
+        profiles.map((p2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ProfileCard,
+          {
+            profile: p2,
+            isActive: p2.id === activeProfileId,
+            onSelect: () => onSelectProfile(p2.id),
+            onEdit: () => setEditingId(p2.id),
+            onDelete: () => {
+              onDeleteProfile(p2.id);
+              if (viewingId === p2.id) setViewingId(null);
+            },
+            onOpenDetail: () => setViewingId(p2.id),
+            t: t2
+          },
+          p2.id
+        ))
+      ] })
+    ] }) }),
+    editingProfile && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      EditMeasurementsModal,
+      {
+        profile: editingProfile,
+        onSave: (m2) => {
+          onSaveProfileMeasurements(editingProfile.id, m2);
+          setEditingId(null);
         },
-        onCancel: () => setCreating(false),
+        onCancel: () => setEditingId(null),
         t: t2
       }
     )
-  ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-header", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-msp-title", children: t2("My Sizing Profiles") }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-msp-subtitle", children: t2("Manage your bespoke silhouettes. Switch between profiles for different fits or create a new one for specific garment types.") })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-msp-grid", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CreateProfileCard, { onClick: () => setCreating(true), t: t2 }),
-      profiles.map((p2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ProfileCard,
-        {
-          profile: p2,
-          isActive: p2.id === activeProfileId,
-          onSelect: () => onSelectProfile(p2.id),
-          onEdit: () => onEditProfile(p2),
-          onOpenDetail: () => setViewingId(p2.id),
-          t: t2
-        },
-        p2.id
-      ))
-    ] })
-  ] }) }) });
+  ] });
 }
 function ResultView({ setView }) {
   reactExports.useEffect(() => {
@@ -18811,7 +18990,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"],
@@ -19683,6 +19862,7 @@ function PrimeStyleTryonInner({
   const [profileSaved, setProfileSaved] = reactExports.useState(false);
   const [drawer, setDrawer] = reactExports.useState(null);
   const [profileDetail, setProfileDetail] = reactExports.useState(null);
+  const prevViewRef = reactExports.useRef(null);
   const fileInputRef = reactExports.useRef(null);
   const apiRef = reactExports.useRef(null);
   const sseRef = reactExports.useRef(null);
@@ -19935,6 +20115,14 @@ function PrimeStyleTryonInner({
     onClose?.();
   }, [onClose, previewUrl]);
   const handleBack = reactExports.useCallback(() => {
+    if (drawer) {
+      setDrawer(null);
+      if (prevViewRef.current) {
+        setView(prevViewRef.current);
+        prevViewRef.current = null;
+      }
+      return;
+    }
     switch (view) {
       case "body-profile":
         handleClose();
@@ -19956,13 +20144,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 = reactExports.useCallback((file) => {
     if (!isValidImageFile(file)) {
@@ -20953,7 +21141,14 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("Profiles"), onClick: () => setView(view === "profiles" ? "body-profile" : "profiles"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(UserIcon, {}) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("History"), onClick: () => setDrawer(drawer === "history" ? null : "history"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClockIcon, {}) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("History"), onClick: () => {
+            if (drawer === "history") {
+              setDrawer(null);
+            } else {
+              prevViewRef.current = view;
+              setDrawer("history");
+            }
+          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClockIcon, {}) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: handleClose, className: cx("ps-tryon-close", cn.closeButton), children: /* @__PURE__ */ jsxRuntimeExports.jsx(XIcon, {}) })
         ] }),
         view !== "body-profile" && view !== "processing" && !(view === "size-result" && sizeGuide?.sections && Object.keys(sizeGuide.sections).length > 1) && /* @__PURE__ */ jsxRuntimeExports.jsx(Stepper, { view, stepIndex }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primestyleai/tryon",
-  "version": "5.7.11",
+  "version": "5.8.1",
   "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
   "type": "module",
   "main": "dist/primestyle-tryon.js",