@primestyleai/tryon 4.7.9 → 4.8.0

package/dist/react/index.js

@@ -5502,7 +5502,7 @@ function BodyProfileView({
       setPhotoProcessing(false);
     }
   }, [t]);
-  useCallback(() => {
+  const handleRemovePhoto = useCallback(() => {
     if (photoPreview) URL.revokeObjectURL(photoPreview);
     setPhotoFile(null);
     setPhotoPreview(null);
@@ -5655,7 +5655,84 @@ function BodyProfileView({
   const isLastStep = step === steps[steps.length - 1];
   if (step === "photo") {
     return /* @__PURE__ */ jsxs("div", { className: "ps-bp-wrapper", children: [
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", minHeight: "20vw" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "1.2vw", fontWeight: 600, color: "var(--ps-text-primary)" }, children: "hello" }) }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "1.2vw", padding: "1.5vw", width: "100%", height: "100%", minHeight: "20vw", alignItems: "stretch" }, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => !photoPreview && fileInputRef.current?.click(),
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              border: photoPreview ? "2px solid var(--ps-accent)" : "2px dashed var(--ps-border-color)",
+              borderRadius: "0.5vw",
+              cursor: photoPreview ? "default" : "pointer",
+              position: "relative",
+              background: "var(--ps-bg-secondary)",
+              transition: "border-color 0.2s",
+              overflow: "hidden"
+            },
+            children: photoPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("img", { src: photoPreview, alt: "preview", style: { width: "100%", height: "100%", objectFit: "contain" } }),
+              /* @__PURE__ */ jsx("button", { onClick: (e) => {
+                e.stopPropagation();
+                handleRemovePhoto();
+              }, style: { position: "absolute", top: "0.5vw", right: "0.5vw", width: "1.4vw", height: "1.4vw", borderRadius: "50%", background: "rgba(0,0,0,0.6)", border: "none", color: "#fff", fontSize: "0.7vw", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }, children: "×" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(UploadIcon, { size: 32 }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t("Upload your photo") }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: t("Click or drag a full-body photo") }),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.5vw", color: "var(--ps-text-dim)", marginTop: "0.4vw" }, children: "JPEG, PNG (max 10MB)" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "0.6vw", justifyContent: "center" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: "0.85vw", fontWeight: 700, color: "var(--ps-text-primary)", marginBottom: "0.3vw" }, children: t("How to take the best photo") }),
+          /* @__PURE__ */ jsxs("div", { style: { background: "#ddfbe7", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#1c9d4c", fontSize: "0.75vw", fontWeight: 700 }, children: "✓" }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#1c9d4c", fontSize: "0.65vw", fontWeight: 600 }, children: t("Do") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              t("Stand facing the camera with your full body in frame"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Use natural or even lighting (e.g. near a window)"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Wear fitted, simple clothing (e.g. neutral colors)"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Choose a plain background (a light wall is ideal)"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Stand straight and still, arms relaxed by your sides")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { background: "#ffe2e2", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#e7000b", fontSize: "0.75vw", fontWeight: 700 }, children: "✗" }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#e7000b", fontSize: "0.65vw", fontWeight: 600 }, children: t("Don't") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: [
+              t("Don't wear loose, baggy, or layered clothing"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Don't sit, pose, or bend your body"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Don't use strong backlighting"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Don't take mirror photos or selfies"),
+              /* @__PURE__ */ jsx("br", {}),
+              t("Don't apply filters, effects, or edits")
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { background: "#c6e1f7", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.2vw" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7vw" }, children: "💡" }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#3267c3", fontSize: "0.65vw", fontWeight: 600 }, children: t("Quick Tip") })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.6 }, children: t("The simpler your photo is, the more accurate your virtual try-on results will be.") })
+          ] })
+        ] })
+      ] }),
       /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handlePhotoSelect, style: { display: "none" } })
     ] });
   }

package/package.json

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