@primestyleai/tryon 5.8.31 → 5.8.32

package/dist/react/index.js

@@ -4974,44 +4974,179 @@ const STYLES = `
     color: var(--ps-text-muted);
   }
 
-  /* ── Image path — single combined screen, vw-scaled ── */
-  .ps-cpw-image-combined {
-    display: flex; flex-direction: column; align-items: stretch;
-    gap: clamp(8px, 0.7vw, 14px);
+  /* ── Image path — split layout with dropzone + photo guide ──
+     Two columns: dropzone with silhouette placeholder on the LEFT,
+     gender pills + name input + photo-guide checklist on the RIGHT.
+     Collapses to single column on narrow viewports via flex-wrap. */
+  .ps-cpw-image-split {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+    gap: clamp(14px, 1.2vw, 26px);
     flex: 1; min-height: 0;
     width: 100%; box-sizing: border-box;
   }
-  .ps-cpw-photo-dropzone {
-    display: flex; flex-direction: column; align-items: center; justify-content: center;
-    gap: clamp(4px, 0.4vw, 10px);
+  .ps-cpw-image-left {
+    display: flex; flex-direction: column;
+    min-width: 0; min-height: 0;
+  }
+  .ps-cpw-image-right {
+    display: flex; flex-direction: column;
+    gap: clamp(10px, 0.9vw, 18px);
+    min-width: 0; min-height: 0;
+  }
+
+  /* Dropzone — premium card with a faded body silhouette behind the
+     upload prompt. Communicates "this is where the body photo goes". */
+  .ps-cpw-dropzone {
+    position: relative;
+    display: flex; align-items: center; justify-content: center;
     flex: 1; min-height: 0;
     width: 100%; box-sizing: border-box;
-    padding: clamp(10px, 0.9vw, 18px);
-    border: 2px dashed var(--ps-border-color);
-    border-radius: clamp(8px, 0.6vw, 14px);
-    background: var(--ps-bg-secondary);
+    padding: clamp(14px, 1.2vw, 26px);
+    border: 1.5px dashed var(--ps-border-color);
+    border-radius: clamp(10px, 0.75vw, 16px);
+    background:
+      radial-gradient(ellipse at 50% 60%, rgba(33, 84, 239, 0.05) 0%, transparent 70%),
+      var(--ps-bg-secondary);
     color: var(--ps-text-muted);
     cursor: pointer; font-family: inherit;
-    transition: border-color 0.18s, background 0.18s;
+    overflow: hidden;
+    transition: border-color 0.22s, background 0.22s, transform 0.22s;
   }
-  .ps-cpw-photo-dropzone:hover { border-color: var(--ps-accent); background: rgba(33, 84, 239, 0.04); }
-  .ps-cpw-photo-dropzone:disabled { opacity: 0.6; cursor: default; }
-  .ps-cpw-photo-dropzone-title {
+  .ps-cpw-dropzone:hover {
+    border-color: var(--ps-accent);
+    transform: translateY(-1px);
+  }
+  .ps-cpw-dropzone:disabled { opacity: 0.6; cursor: default; transform: none; }
+  /* Faded body silhouette behind the upload prompt */
+  .ps-cpw-dropzone-silhouette {
+    position: absolute;
+    left: 50%; top: 50%;
+    transform: translate(-50%, -50%);
+    width: clamp(60px, 7vw, 130px);
+    height: auto;
+    color: var(--ps-accent);
+    opacity: 0.08;
+    pointer-events: none;
+  }
+  .ps-cpw-dropzone-content {
+    position: relative;
+    z-index: 1;
+    display: flex; flex-direction: column; align-items: center;
+    gap: clamp(4px, 0.4vw, 10px);
+  }
+  .ps-cpw-dropzone-upload-icon {
+    width: clamp(28px, 2vw, 40px);
+    height: clamp(28px, 2vw, 40px);
+    color: var(--ps-accent);
+    margin-bottom: clamp(2px, 0.2vw, 6px);
+  }
+  .ps-cpw-dropzone-title {
     font-size: clamp(11px, 0.78vw, 14px);
-    font-weight: 600; color: var(--ps-text-primary);
+    font-weight: 600;
+    color: var(--ps-text-primary);
+    text-align: center;
   }
-  .ps-cpw-photo-dropzone-hint {
+  .ps-cpw-dropzone-hint {
     font-size: clamp(9px, 0.62vw, 12px);
     color: var(--ps-text-muted);
+    letter-spacing: 0.04em;
   }
-  .ps-cpw-photo-frame {
+
+  /* Photo preview frame (after upload) */
+  .ps-cpw-photo-preview-frame {
     position: relative;
     flex: 1; min-height: 0;
     width: 100%;
     background: var(--ps-bg-secondary);
-    border-radius: clamp(8px, 0.6vw, 14px);
+    border-radius: clamp(10px, 0.75vw, 16px);
     overflow: hidden;
     border: 1px solid var(--ps-border-subtle);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-cpw-photo-preview-img {
+    width: 100%; height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+  .ps-cpw-photo-retake-pill {
+    position: absolute;
+    bottom: clamp(8px, 0.7vw, 14px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255,255,255,0.95);
+    border: 1px solid var(--ps-border-subtle);
+    color: var(--ps-text-primary);
+    padding: clamp(6px, 0.55vw, 12px) clamp(12px, 1vw, 20px);
+    border-radius: 999px;
+    font-family: inherit;
+    font-size: clamp(10px, 0.7vw, 13px);
+    font-weight: 600;
+    cursor: pointer;
+    backdrop-filter: blur(6px);
+    transition: background 0.22s, color 0.22s;
+  }
+  .ps-cpw-photo-retake-pill:hover {
+    background: var(--ps-accent);
+    color: #FFFFFF;
+    border-color: var(--ps-accent);
+  }
+  .ps-cpw-photo-remove {
+    position: absolute;
+    top: clamp(8px, 0.7vw, 14px);
+    right: clamp(8px, 0.7vw, 14px);
+    width: clamp(24px, 1.8vw, 34px);
+    height: clamp(24px, 1.8vw, 34px);
+    border-radius: 50%;
+    background: rgba(28, 29, 30, 0.7);
+    color: #FFFFFF;
+    border: none;
+    cursor: pointer;
+    font-size: clamp(14px, 1.1vw, 18px);
+    font-weight: 600;
+    display: flex; align-items: center; justify-content: center;
+    backdrop-filter: blur(6px);
+    transition: background 0.18s;
+  }
+  .ps-cpw-photo-remove:hover { background: rgba(28, 29, 30, 0.9); }
+
+  /* Photo guide checklist — soft tinted card on the right column */
+  .ps-cpw-photo-guide {
+    background: var(--ps-bg-secondary);
+    border: 1px solid var(--ps-border-subtle);
+    border-radius: clamp(10px, 0.75vw, 16px);
+    padding: clamp(12px, 1vw, 20px) clamp(14px, 1.1vw, 22px);
+    display: flex; flex-direction: column;
+    gap: clamp(6px, 0.55vw, 12px);
+    margin-top: auto;
+  }
+  .ps-cpw-photo-guide-title {
+    font-size: clamp(9px, 0.62vw, 11px);
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--ps-text-primary);
+  }
+  .ps-cpw-photo-guide-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex; flex-direction: column;
+    gap: clamp(4px, 0.4vw, 10px);
+  }
+  .ps-cpw-photo-guide-list li {
+    display: flex; align-items: flex-start;
+    gap: clamp(6px, 0.55vw, 12px);
+    font-size: clamp(10px, 0.72vw, 13px);
+    line-height: 1.45;
+    color: var(--ps-text-secondary);
+  }
+  .ps-cpw-photo-guide-list li svg {
+    flex-shrink: 0;
+    width: clamp(12px, 0.9vw, 16px);
+    height: clamp(12px, 0.9vw, 16px);
+    color: var(--ps-accent);
+    margin-top: 0.15em;
   }
   .ps-cpw-photo-frame-img {
     width: 100%; height: 100%;
@@ -9213,27 +9348,7 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
         ] })
       ] }, "bra"),
       mode === "manual" && error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error }),
-      mode === "image" && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-image-combined ps-cpw-fade-in", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-cpw-pill-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "male" ? " ps-active" : ""}`, onClick: () => setGender("male"), children: t("Male") }),
-          /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "female" ? " ps-active" : ""}`, onClick: () => setGender("female"), children: t("Female") })
-        ] }) }),
-        /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-fields ps-cpw-inline-fields", children: /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
-          /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-label", children: t("NAME") }),
-          /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-input-group", children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              className: "ps-bp-inline-input",
-              value: name,
-              placeholder: t("e.g. My Photo Profile"),
-              onChange: (e) => {
-                setName(e.target.value);
-                setError("");
-              }
-            }
-          ) })
-        ] }) }),
+      mode === "image" && /* @__PURE__ */ jsxs("div", { className: "ps-cpw-image-split ps-cpw-fade-in", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -9244,8 +9359,8 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
             onChange: handlePhotoSelect
           }
         ),
-        photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-frame", children: [
-          /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo"), className: "ps-cpw-photo-frame-img" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-cpw-image-left", children: photoBase64 ? /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-preview-frame", children: [
+          /* @__PURE__ */ jsx("img", { src: photoBase64, alt: t("Profile photo"), className: "ps-cpw-photo-preview-img" }),
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -9255,26 +9370,84 @@ function CreateProfileWizard({ onSave, onCancel, t }) {
               "aria-label": t("Remove photo"),
               children: "×"
             }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "ps-cpw-photo-retake-pill",
+              onClick: () => photoInputRef.current?.click(),
+              children: t("Retake")
+            }
           )
         ] }) : /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            className: "ps-cpw-photo-dropzone",
+            className: "ps-cpw-dropzone",
             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: "36", height: "36", 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__ */ jsxs("svg", { className: "ps-cpw-dropzone-silhouette", viewBox: "0 0 80 200", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "40", cy: "20", r: "13" }),
+                /* @__PURE__ */ jsx("path", { d: "M40 35 L40 110 M22 60 L22 105 M58 60 L58 105 M22 60 Q40 50 58 60 M40 110 L25 195 M40 110 L55 195" })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-dropzone-title", children: photoUploading ? t("Processing...") : t("Tap to upload a photo") }),
-              /* @__PURE__ */ jsx("span", { className: "ps-cpw-photo-dropzone-hint", children: t("JPEG / PNG / WebP up to 10MB") })
+              /* @__PURE__ */ jsxs("div", { className: "ps-cpw-dropzone-content", children: [
+                /* @__PURE__ */ jsxs("svg", { className: "ps-cpw-dropzone-upload-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", 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-dropzone-title", children: photoUploading ? t("Processing…") : t("Drop a photo or click to upload") }),
+                /* @__PURE__ */ jsx("span", { className: "ps-cpw-dropzone-hint", children: t("JPEG · PNG · WebP · up to 10MB") })
+              ] })
             ]
           }
-        ),
-        error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-cpw-image-right", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-cpw-pill-row", children: /* @__PURE__ */ jsxs("div", { className: "ps-cpw-pill-group", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "male" ? " ps-active" : ""}`, onClick: () => setGender("male"), children: t("Male") }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: `ps-cpw-pill${gender === "female" ? " ps-active" : ""}`, onClick: () => setGender("female"), children: t("Female") })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-fields ps-cpw-inline-fields", children: /* @__PURE__ */ jsxs("div", { className: "ps-bp-inline-row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-bp-inline-label", children: t("NAME") }),
+            /* @__PURE__ */ jsx("div", { className: "ps-bp-inline-input-group", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: "ps-bp-inline-input",
+                value: name,
+                placeholder: t("e.g. My Photo Profile"),
+                onChange: (e) => {
+                  setName(e.target.value);
+                  setError("");
+                }
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ps-cpw-photo-guide", children: [
+            /* @__PURE__ */ jsx("div", { className: "ps-cpw-photo-guide-title", children: t("HOW TO TAKE A GOOD PHOTO") }),
+            /* @__PURE__ */ jsxs("ul", { className: "ps-cpw-photo-guide-list", children: [
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Stand straight, arms relaxed at your sides")
+              ] }),
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Full body in frame, head to toes")
+              ] }),
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Form-fitting clothing, no loose layers")
+              ] }),
+              /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "3 8 7 12 13 4" }) }),
+                t("Plain background, neutral lighting")
+              ] })
+            ] })
+          ] }),
+          error && /* @__PURE__ */ jsx("div", { className: "ps-cpw-error", children: error })
+        ] })
       ] }, "image-combined")
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "ps-cpw-footer", children: [