@primestyleai/tryon 5.6.5 → 5.6.7

package/dist/react/index.js

@@ -4148,6 +4148,22 @@ const STYLES = `
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 24px;
   }
+
+  /* Two-column split: inputs stacked left, photo right */
+  .ps-cpw-split {
+    display: grid;
+    grid-template-columns: 1fr 280px;
+    gap: 28px;
+    align-items: start;
+  }
+  .ps-cpw-split-left {
+    display: flex; flex-direction: column; gap: 22px;
+    min-width: 0;
+  }
+  .ps-cpw-split-right {
+    display: flex; flex-direction: column; gap: 8px;
+    min-width: 0;
+  }
   .ps-cpw-error {
     font-size: 12px;
     color: var(--ps-error-color);
@@ -4185,14 +4201,17 @@ const STYLES = `
   }
   .ps-cpw-photo-preview {
     position: relative;
-    width: 100%; max-width: 220px;
+    width: 100%;
     border-radius: 12px; overflow: hidden;
     background: var(--ps-bg-secondary);
     border: 1px solid var(--ps-border-subtle);
-    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
+    aspect-ratio: 3 / 4;
+    display: flex; align-items: center; justify-content: center;
   }
   .ps-cpw-photo-preview img {
-    width: 100%; height: 100%; object-fit: cover;
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain;
   }
   .ps-cpw-photo-remove {
     position: absolute; top: 8px; right: 8px;
@@ -4301,6 +4320,8 @@ const STYLES = `
     .ps-cpw-progress { min-width: 0; width: 100%; align-items: flex-start; margin-top: 0; }
     .ps-cpw-step-title { font-size: 22px; }
     .ps-cpw-field-grid { grid-template-columns: 1fr; gap: 18px; }
+    .ps-cpw-split { grid-template-columns: 1fr; gap: 18px; }
+    .ps-cpw-photo-preview { max-width: 220px; }
     .ps-cpw-card-row { gap: 8px; }
     .ps-cpw-card { padding: 10px 6px 8px; }
     .ps-cpw-card-thumb { height: 80px; }
@@ -4385,6 +4406,29 @@ const STYLES = `
     letter-spacing: 0.14em; text-transform: uppercase;
     color: var(--ps-text-primary);
   }
+  .ps-pmv-section-title-row {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 12px;
+  }
+  .ps-pmv-loading-pill {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 6px 12px;
+    background: rgba(33, 84, 239, 0.08);
+    color: var(--ps-accent);
+    border-radius: 999px;
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.1em; text-transform: uppercase;
+  }
+  .ps-pmv-loading-spinner {
+    width: 12px; height: 12px;
+    border: 2px solid rgba(33, 84, 239, 0.25);
+    border-top-color: var(--ps-accent);
+    border-radius: 50%;
+    animation: ps-pmv-spin 0.8s linear infinite;
+  }
+  @keyframes ps-pmv-spin {
+    to { transform: rotate(360deg); }
+  }
   .ps-pmv-section-sub {
     font-size: 12px; font-weight: 400;
     color: var(--ps-text-muted);
@@ -4417,10 +4461,24 @@ const STYLES = `
     color: var(--ps-border-color);
     animation: ps-pmv-shimmer 1.4s ease-in-out infinite;
   }
+  .ps-pmv-measure.ps-loading {
+    background: linear-gradient(
+      90deg,
+      var(--ps-bg-primary) 0%,
+      var(--ps-bg-secondary) 50%,
+      var(--ps-bg-primary) 100%
+    );
+    background-size: 200% 100%;
+    animation: ps-pmv-skeleton 1.6s ease-in-out infinite;
+  }
   @keyframes ps-pmv-shimmer {
     0%, 100% { opacity: 0.5; }
     50%      { opacity: 1; }
   }
+  @keyframes ps-pmv-skeleton {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
 
   /* Saved sizes history (per-product cache) */
   .ps-pmv-history {
@@ -4501,11 +4559,26 @@ const STYLES = `
     font-family: inherit; font-size: 11px; font-weight: 700;
     letter-spacing: 0.12em; text-transform: uppercase;
     cursor: pointer;
-    transition: opacity 0.15s, transform 0.15s;
+    transition: opacity 0.15s, transform 0.15s, background 0.2s;
     box-shadow: 0 4px 14px rgba(33, 84, 239, 0.18);
+    display: inline-flex; align-items: center; gap: 8px;
+    justify-content: center;
+  }
+  .ps-pmv-btn-primary:hover:not(:disabled) { opacity: 0.92; }
+  .ps-pmv-btn-primary:active:not(:disabled) { transform: scale(0.98); }
+  .ps-pmv-btn-primary:disabled {
+    background: var(--ps-text-muted);
+    cursor: not-allowed;
+    box-shadow: none;
+    opacity: 0.65;
+  }
+  .ps-pmv-btn-spinner {
+    width: 12px; height: 12px;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+    border-top-color: #FFFFFF;
+    border-radius: 50%;
+    animation: ps-pmv-spin 0.8s linear infinite;
   }
-  .ps-pmv-btn-primary:hover { opacity: 0.92; }
-  .ps-pmv-btn-primary:active { transform: scale(0.98); }
 
   @media (max-width: 768px) {
     .ps-pmv-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
@@ -5262,7 +5335,10 @@ function LangSwitcher({ activeLocale: current, onSelect }) {
             position: "fixed",
             top: pos.top,
             right: pos.right,
-            zIndex: 9999999
+            // Match the overlay's z-index (2147483647) so the dropdown sits
+            // above it. With equal z-index, document order wins — and the
+            // dropdown is portaled later than the overlay so it stacks on top.
+            zIndex: 2147483647
           },
           children: /* @__PURE__ */ jsx("div", { className: "ps-tryon-lang-list", children: SUPPORTED_LOCALES.map((code) => /* @__PURE__ */ jsxs(
             "button",
@@ -7758,116 +7834,118 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
           /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${unit === "in" ? " ps-active" : ""}`, onClick: () => setUnit("in"), children: "in" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field-grid", children: [
-        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
-          /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
-            t("HEIGHT"),
-            " (",
-            unit,
-            ")"
+      /* @__PURE__ */ jsxs("div", { className: "ps-cpw-split", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-split-left", children: [
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+            /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
+              t("HEIGHT"),
+              " (",
+              unit,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                inputMode: "numeric",
+                className: "ps-cpw-input",
+                value: heightVal,
+                placeholder: unit === "cm" ? t("e.g. 173") : t("e.g. 68 in"),
+                onChange: (e) => {
+                  setHeightVal(e.target.value);
+                  setError("");
+                }
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              inputMode: "numeric",
-              className: "ps-cpw-input",
-              value: heightVal,
-              placeholder: unit === "cm" ? t("e.g. 173") : t("e.g. 68 in"),
-              onChange: (e) => {
-                setHeightVal(e.target.value);
-                setError("");
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+            /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
+              t("WEIGHT"),
+              " (",
+              unit === "in" ? "lbs" : "kg",
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                inputMode: "numeric",
+                className: "ps-cpw-input",
+                value: weightVal,
+                placeholder: unit === "in" ? t("e.g. 154") : t("e.g. 70"),
+                onChange: (e) => {
+                  setWeightVal(e.target.value);
+                  setError("");
+                }
               }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
-          /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
-            t("WEIGHT"),
-            " (",
-            unit === "in" ? "lbs" : "kg",
-            ")"
+            )
           ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              inputMode: "numeric",
-              className: "ps-cpw-input",
-              value: weightVal,
-              placeholder: unit === "in" ? t("e.g. 154") : t("e.g. 70"),
-              onChange: (e) => {
-                setWeightVal(e.target.value);
-                setError("");
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
+            /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
+              t("AGE"),
+              " (",
+              t("years"),
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                inputMode: "numeric",
+                className: "ps-cpw-input",
+                value: ageVal,
+                placeholder: t("e.g. 30"),
+                onChange: (e) => {
+                  setAgeVal(e.target.value);
+                  setError("");
+                }
               }
-            }
-          )
+            )
+          ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-field", children: [
-          /* @__PURE__ */ jsxs("label", { className: "ps-cpw-field-label", children: [
-            t("AGE"),
-            " (",
-            t("years"),
-            ")"
-          ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-split-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-cpw-field-label", children: t("PROFILE PHOTO (OPTIONAL)") }),
           /* @__PURE__ */ jsx(
             "input",
             {
-              type: "number",
-              inputMode: "numeric",
-              className: "ps-cpw-input",
-              value: ageVal,
-              placeholder: t("e.g. 30"),
-              onChange: (e) => {
-                setAgeVal(e.target.value);
-                setError("");
-              }
+              ref: photoInputRef,
+              type: "file",
+              accept: "image/*",
+              onChange: handlePhotoSelect,
+              style: { display: "none" }
             }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-cpw-field-label", children: t("PROFILE PHOTO (OPTIONAL)") }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: photoInputRef,
-            type: "file",
-            accept: "image/*",
-            onChange: handlePhotoSelect,
-            style: { display: "none" }
-          }
-        ),
-        photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-preview", children: [
-          /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo") }),
-          /* @__PURE__ */ jsx(
+          ),
+          photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-preview", children: [
+            /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "ps-cpw-photo-remove",
+                onClick: handleRemovePhoto,
+                "aria-label": t("Remove photo"),
+                children: "×"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              className: "ps-cpw-photo-remove",
-              onClick: handleRemovePhoto,
-              "aria-label": t("Remove photo"),
-              children: "×"
+              className: "ps-cpw-photo-upload",
+              onClick: () => photoInputRef.current?.click(),
+              disabled: photoUploading,
+              children: [
+                /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "22", height: "22", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-upload-title", children: photoUploading ? t("Uploading...") : t("Upload a photo") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-upload-hint", children: t("Helps refine your AI sizing — JPEG, PNG up to 10MB") })
+              ]
             }
           )
-        ] }) : /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: "ps-cpw-photo-upload",
-            onClick: () => photoInputRef.current?.click(),
-            disabled: photoUploading,
-            children: [
-              /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "22", height: "22", children: [
-                /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
-                /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-upload-title", children: photoUploading ? t("Uploading...") : t("Upload a photo") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-upload-hint", children: t("Helps refine your AI sizing — JPEG, PNG up to 10MB") })
-            ]
-          }
-        )
+        ] })
       ] }),
       error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "ps-cpw-silhouette", children: [
@@ -7953,6 +8031,7 @@ function ProfileMeasurementsView({
   onEdit,
   onDelete,
   onBack,
+  onSave,
   t
 }) {
   const fields = profile.gender === "female" ? FIELDS_WOMEN : FIELDS_MEN;
@@ -8002,12 +8081,18 @@ function ProfileMeasurementsView({
     ] }),
     /* @__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("BODY MEASUREMENTS") }),
-        /* @__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("Calculating your full body measurements...") })
+        /* @__PURE__ */ jsxs("div", { className: "ps-pmv-section-title-row", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-pmv-section-title", children: t("BODY MEASUREMENTS") }),
+          !hasMeasurements && /* @__PURE__ */ jsxs("div", { className: "ps-pmv-loading-pill", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-pmv-loading-spinner" }),
+            /* @__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-measure-grid", children: fields.map((f) => {
         const v = measurements[f.key];
-        return /* @__PURE__ */ jsxs("div", { className: "ps-pmv-measure", children: [
+        return /* @__PURE__ */ jsxs("div", { className: `ps-pmv-measure${v == null ? " ps-loading" : ""}`, 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}` : "—" })
         ] }, f.key);
@@ -8032,7 +8117,20 @@ function ProfileMeasurementsView({
       /* @__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-primary", onClick: onSelect, children: t("USE THIS PROFILE") })
+        !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,
+            disabled: !hasMeasurements,
+            children: hasMeasurements ? t("SAVE") : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-pmv-btn-spinner" }),
+              t("CALCULATING")
+            ] })
+          }
+        )
       ] })
     ] })
   ] });
@@ -8189,6 +8287,7 @@ function MySizingProfilesView({
           setViewingId(null);
         },
         onBack: () => setViewingId(null),
+        onSave: () => setViewingId(null),
         t
       }
     )