@primestyleai/tryon 5.10.99 → 5.10.101

package/dist/storefront/primestyle-tryon.js

@@ -17929,6 +17929,110 @@ const STYLES$1 = `
 
   /* Upload hover overlay */
   .ps-tryon-upload-hover:hover .ps-tryon-upload-hover-overlay { opacity: 1 !important; }
+
+  /* ─────────── Unified PhotoUploadZone ─────────── */
+  .ps-photo-zone {
+    flex: 1; min-height: 220px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    border: 2px dashed var(--ps-border-color);
+    border-radius: 0.5vw;
+    background: var(--ps-bg-secondary);
+    cursor: pointer; position: relative; overflow: hidden;
+    transition: border-color 0.18s, background 0.18s, transform 0.18s;
+  }
+  .ps-photo-zone:hover { border-color: var(--ps-accent); background: rgba(33,84,239,0.02); }
+  .ps-photo-zone.ps-photo-zone-drag {
+    border-color: var(--ps-accent); border-style: solid;
+    background: rgba(33,84,239,0.06);
+    transform: scale(1.005);
+  }
+  .ps-photo-zone.ps-photo-zone-has { border: none; cursor: default; padding: 0; }
+  .ps-photo-zone.ps-photo-zone-inline { min-height: 100%; height: 100%; }
+
+  .ps-photo-zone-empty {
+    display: flex; flex-direction: column; align-items: center; gap: 0.4vw;
+    padding: 1vw; text-align: center; pointer-events: none;
+  }
+  .ps-photo-zone-title { font-size: 0.85vw; font-weight: 600; color: var(--ps-text-primary); }
+  .ps-photo-zone-hint  { font-size: 0.6vw; color: var(--ps-text-muted); line-height: 1.4; max-width: 24vw; }
+
+  .ps-photo-zone-img {
+    width: 100%; height: 100%; object-fit: contain;
+    display: block; cursor: pointer;
+  }
+  .ps-photo-zone-hover-overlay {
+    position: absolute; inset: 0;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.2s;
+    color: #fff; font-size: 0.8vw; font-weight: 600;
+    border-radius: 0.5vw; cursor: pointer;
+  }
+  .ps-photo-zone:hover .ps-photo-zone-hover-overlay { opacity: 1; }
+  .ps-photo-zone-remove {
+    position: absolute; top: 0.5vw; right: 0.5vw;
+    background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 50%;
+    width: 24px; height: 24px; min-width: 24px;
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; transition: background 0.15s;
+    z-index: 2;
+  }
+  .ps-photo-zone-remove:hover { background: rgba(239,68,68,0.85); }
+
+  .ps-photo-zone-processing {
+    display: flex; flex-direction: column; align-items: center; gap: 0.5vw;
+    padding: 1vw;
+  }
+  .ps-photo-zone-spinner {
+    width: 28px; height: 28px;
+    border: 3px solid rgba(33,84,239,0.18);
+    border-top-color: var(--ps-accent);
+    border-radius: 50%;
+    animation: ps-spin 0.7s linear infinite;
+  }
+  .ps-photo-zone-status { font-size: 0.7vw; color: var(--ps-text-secondary); }
+
+  .ps-photo-zone-rejection {
+    display: flex; flex-direction: column; align-items: center; gap: 0.5vw;
+    padding: 1vw 1.2vw; max-width: 22vw; text-align: center;
+    cursor: default;
+  }
+  .ps-photo-zone-rejection-icon {
+    width: 36px; height: 36px; border-radius: 50%;
+    background: rgba(239,68,68,0.12); color: #dc2626;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 18px; font-weight: 700;
+  }
+  .ps-photo-zone-rejection-title { font-size: 0.85vw; font-weight: 700; color: var(--ps-text-primary); }
+  .ps-photo-zone-rejection-msg   { font-size: 0.65vw; color: var(--ps-text-secondary); line-height: 1.5; }
+  .ps-photo-zone-rejection-cta {
+    margin-top: 0.3vw; padding: 0.55vw 1vw;
+    background: var(--ps-accent); color: #fff; border: none;
+    border-radius: 0.4vw; font-family: inherit;
+    font-size: 0.7vw; font-weight: 600; cursor: pointer;
+    transition: opacity 0.15s;
+  }
+  .ps-photo-zone-rejection-cta:hover { opacity: 0.9; }
+
+  .ps-photo-zone-error {
+    position: absolute; bottom: 0.6vw; left: 0.6vw; right: 0.6vw;
+    background: rgba(239,68,68,0.08); color: #dc2626;
+    border: 1px solid rgba(239,68,68,0.2); border-radius: 0.4vw;
+    padding: 0.4vw 0.6vw; font-size: 0.6vw; line-height: 1.4;
+    text-align: center; pointer-events: none;
+  }
+
+  @media (max-width: 700px) {
+    .ps-photo-zone { min-height: 200px; border-radius: 12px; }
+    .ps-photo-zone-title { font-size: 14px; }
+    .ps-photo-zone-hint  { font-size: 11px; max-width: 90%; }
+    .ps-photo-zone-hover-overlay { font-size: 13px; }
+    .ps-photo-zone-status { font-size: 12px; }
+    .ps-photo-zone-rejection { max-width: 90%; gap: 8px; padding: 14px; }
+    .ps-photo-zone-rejection-title { font-size: 14px; }
+    .ps-photo-zone-rejection-msg   { font-size: 12px; }
+    .ps-photo-zone-rejection-cta   { font-size: 13px; padding: 10px 16px; border-radius: 8px; }
+    .ps-photo-zone-error { font-size: 11px; padding: 8px 10px; border-radius: 8px; }
+  }
 `;
 function CameraIcon$1({ size = 18 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -21928,6 +22032,384 @@ function UploadView({
     }
   ) });
 }
+function PhotoUploadZone({
+  apiUrl,
+  apiKey,
+  previewUrl,
+  requireAgeConfirm = false,
+  ageConfirmed,
+  disabled = false,
+  hintLine,
+  emptyTitle,
+  variant = "block",
+  onPhotoAccepted,
+  onClearPhoto,
+  t: t2
+}) {
+  const inputRef = reactExports.useRef(null);
+  const dragDepthRef = reactExports.useRef(0);
+  const [dragOver, setDragOver] = reactExports.useState(false);
+  const [processing, setProcessing] = reactExports.useState(false);
+  const [statusText, setStatusText] = reactExports.useState("");
+  const [rejection, setRejection] = reactExports.useState(null);
+  const [localError, setLocalError] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    if (!previewUrl) {
+      setRejection(null);
+      setLocalError(null);
+    }
+  }, [previewUrl]);
+  const acceptFile = async (file) => {
+    if (disabled || processing) return;
+    setLocalError(null);
+    setRejection(null);
+    if (requireAgeConfirm && ageConfirmed !== true) {
+      setLocalError(t2("Please confirm that the person in the photo is 18 or older before uploading."));
+      return;
+    }
+    if (!file.type.startsWith("image/")) {
+      setLocalError(t2("Please upload an image file"));
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      setLocalError(t2("Image must be under 10MB"));
+      return;
+    }
+    if (apiUrl && apiKey) {
+      setProcessing(true);
+      setStatusText(t2("Analyzing photo…"));
+      try {
+        const ageResult = await checkAgeBeforeUpload(file, apiUrl, apiKey);
+        if (!ageResult.isAdult) {
+          const reason = ageResult.reasoning?.trim() || t2("This photo appears to be of a minor. Please upload a photo of someone 18 or older.");
+          setRejection(reason);
+          setProcessing(false);
+          setStatusText("");
+          return;
+        }
+        try {
+          await compressImage(file, { maxDimension: 1024, quality: 0.85 });
+        } catch {
+        }
+      } catch {
+      } finally {
+        setProcessing(false);
+        setStatusText("");
+      }
+    }
+    onPhotoAccepted(file);
+  };
+  const onClick = () => {
+    if (disabled || processing) return;
+    inputRef.current?.click();
+  };
+  const onDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled || processing) return;
+    dragDepthRef.current += 1;
+    setDragOver(true);
+  };
+  const onDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+  };
+  const onDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+    if (dragDepthRef.current === 0) setDragOver(false);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragDepthRef.current = 0;
+    setDragOver(false);
+    if (disabled || processing) return;
+    const file = e.dataTransfer?.files?.[0];
+    if (file) void acceptFile(file);
+  };
+  const onChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) void acceptFile(file);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const removePhoto = () => {
+    setRejection(null);
+    setLocalError(null);
+    onClearPhoto?.();
+  };
+  const isInline = variant === "inline";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: `ps-photo-zone${dragOver ? " ps-photo-zone-drag" : ""}${isInline ? " ps-photo-zone-inline" : ""}${previewUrl ? " ps-photo-zone-has" : ""}`,
+      onClick: previewUrl ? void 0 : onClick,
+      onDragEnter,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: "image/jpeg,image/png,image/webp",
+            style: { display: "none" },
+            onChange
+          }
+        ),
+        previewUrl && !rejection && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: previewUrl, alt: t2("Your photo"), className: "ps-photo-zone-img" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-photo-zone-hover-overlay", onClick, title: t2("Click to change photo"), children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: t2("Click to change photo") }) }),
+          onClearPhoto && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              className: "ps-photo-zone-remove",
+              onClick: (e) => {
+                e.stopPropagation();
+                removePhoto();
+              },
+              "aria-label": t2("Remove photo"),
+              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("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          )
+        ] }),
+        !previewUrl && !rejection && !processing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-photo-zone-empty", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { size: 32 }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-photo-zone-title", children: emptyTitle || t2("Upload your photo") }),
+          hintLine && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-photo-zone-hint", children: hintLine }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-photo-zone-hint", children: t2("JPEG, PNG up to 10MB · click or drop") })
+        ] }),
+        processing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-photo-zone-processing", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-photo-zone-spinner" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-photo-zone-status", children: statusText })
+        ] }),
+        rejection && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-photo-zone-rejection", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-photo-zone-rejection-icon", "aria-hidden": "true", children: "!" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-photo-zone-rejection-title", children: t2("Different photo needed") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-photo-zone-rejection-msg", children: rejection }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              className: "ps-photo-zone-rejection-cta",
+              onClick: () => {
+                setRejection(null);
+                inputRef.current?.click();
+              },
+              children: t2("Choose another photo")
+            }
+          )
+        ] }),
+        localError && !rejection && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-photo-zone-error", onClick: (e) => e.stopPropagation(), children: localError })
+      ]
+    }
+  );
+}
+function PhotoGuideView({
+  measurementType = "body",
+  apiUrl,
+  apiKey,
+  onBack,
+  onSubmit,
+  t: t2
+}) {
+  const isMobile = useIsMobile();
+  const [guideFile, setGuideFile] = reactExports.useState(null);
+  const [guidePreviewUrl, setGuidePreviewUrl] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    if (!guideFile) {
+      setGuidePreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(guideFile);
+    setGuidePreviewUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [guideFile]);
+  const submit = () => {
+    if (!guideFile) return;
+    onSubmit(guideFile);
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bp-wrapper", style: { padding: "16px 16px 0", background: "var(--ps-bg-primary)" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-root", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-header", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "ps-pm-title", children: t2("Review your photo") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "ps-pm-subtitle", children: measurementType === "face" ? t2("A clear, front-facing face photo — no glasses on — gives us the most accurate try-on.") : measurementType === "head" ? t2("Face the camera with your head and shoulders in frame, leaving space above your head.") : t2("Ensure your full body is visible for the most accurate virtual try-on.") })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-preview", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PhotoUploadZone,
+        {
+          apiUrl,
+          apiKey,
+          previewUrl: guidePreviewUrl,
+          variant: "inline",
+          onPhotoAccepted: (f2) => setGuideFile(f2),
+          onClearPhoto: () => setGuideFile(null),
+          emptyTitle: t2("Tap to upload"),
+          t: t2
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-checklist", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-checklist-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "14", height: "14", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-pm-checklist-body", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-checklist-title", children: t2("Checklist for accuracy") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "ps-pm-checklist-items", children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Face the camera directly at eye level") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Remove any glasses you're wearing") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Good lighting, plain background") })
+          ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Head and shoulders in frame") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Leave space above your head") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Good lighting, plain background") })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Form-fitting clothing is recommended") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Standing 2-3 meters from camera") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: t2("Neutral background with good lighting") })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-bpm-spacer" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bpm-bottom", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ps-pm-primary-btn",
+            disabled: !guideFile,
+            onClick: submit,
+            children: t2("START TRY-ON")
+          }
+        ),
+        guideFile ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ps-pm-secondary-btn",
+            onClick: () => setGuideFile(null),
+            children: t2("RETAKE PHOTO")
+          }
+        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ps-pm-secondary-btn",
+            onClick: onBack,
+            children: t2("BACK")
+          }
+        )
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", padding: "1.5vw", width: "100%", height: "100%", background: "var(--ps-bg-primary)", borderRadius: "0.8vw", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "1.2vw", flex: 1, alignItems: "stretch", minHeight: 0, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PhotoUploadZone,
+        {
+          apiUrl,
+          apiKey,
+          previewUrl: guidePreviewUrl,
+          variant: "inline",
+          emptyTitle: t2("Upload your photo"),
+          hintLine: measurementType === "face" ? t2("Click or drag a close-up face photo") : measurementType === "head" ? t2("Click or drag a head-and-shoulders photo") : t2("Click or drag a full-body photo"),
+          onPhotoAccepted: (f2) => setGuideFile(f2),
+          onClearPhoto: () => setGuideFile(null),
+          t: t2
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: "0.6vw" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.85vw", fontWeight: 700, color: "var(--ps-text-primary)", marginBottom: "0.3vw" }, children: t2("How to take the best photo") }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { background: "#ddfbe7", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#1c9d4c", fontSize: "0.75vw", fontWeight: 700 }, children: "✓" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#1c9d4c", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Do") })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            t2("Face the camera directly, centered in frame"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Use natural, even lighting (e.g. near a window)"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Keep hair away from your face and ears"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Choose a plain, light background")
+          ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            t2("Face the camera with head and shoulders in frame"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Leave some space above your head"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Use natural, even lighting"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Choose a plain, light background")
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            t2("Stand facing the camera with your full body in frame"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Use natural or even lighting"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Wear fitted, simple clothing"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Stand straight and still, arms relaxed")
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { background: "#ffe2e2", borderRadius: "0.5vw", padding: "0.6vw 0.8vw" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.3vw" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#e7000b", fontSize: "0.75vw", fontWeight: 700 }, children: "✗" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#e7000b", fontSize: "0.65vw", fontWeight: 600 }, children: t2("Don't") })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.58vw", color: "var(--ps-text-primary)", lineHeight: 1.8 }, children: measurementType === "face" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            t2("Don't wear sunglasses or a hat in the photo"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't tilt or turn your head"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't use strong backlighting or flash"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't apply filters or edits")
+          ] }) : measurementType === "head" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            t2("Don't wear a hat in the photo"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't crop out the top of your head"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't use strong backlighting or flash"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't apply filters or edits")
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            t2("Don't wear loose or baggy clothing"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't sit, pose, or bend"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't take mirror photos or selfies"),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+            t2("Don't apply filters or edits")
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { background: "rgba(59,130,246,0.08)", border: "1px solid rgba(59,130,246,0.2)", borderRadius: "0.5vw", padding: "0.5vw 0.8vw" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.3vw", marginBottom: "0.2vw" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(SparkleIcon, { size: 12 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "var(--ps-accent)", fontSize: "0.65vw", fontWeight: 700 }, children: t2("Pro Tip") })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { fontSize: "0.55vw", color: "var(--ps-text-secondary)", lineHeight: 1.7 }, children: measurementType === "face" ? t2("A clear, well-lit face photo gives the most accurate eyewear try-on.") : measurementType === "head" ? t2("A clear head-and-shoulders photo with space above your head gives the most accurate headwear try-on.") : t2("Our AI works best with front-facing, full-body photos in fitted clothing. Better photos = more accurate virtual try-on!") })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "0.8vw", gap: "0.5vw", flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-back-btn", onClick: onBack, type: "button", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
+        " ",
+        t2("Back")
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-v2-cta", style: { marginTop: 0 }, disabled: !guideFile, onClick: submit, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, { size: 14 }),
+        " ",
+        t2("Start Try-On")
+      ] })
+    ] })
+  ] });
+}
 const RING_RADIUS = 38;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function ProcessingView({
@@ -22914,6 +23396,30 @@ function CreateProfileWizard({ onSave, onCancel, apiUrl, apiKey, onPhotoPreview,
               if (!photoBase64 && ageConfirmed === true) setUploadHoverCpw(true);
             },
             onMouseLeave: () => setUploadHoverCpw(false),
+            onDragEnter: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            onDragOver: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+            },
+            onDragLeave: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            onDrop: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (photoBase64 || ageConfirmed !== true) return;
+              const file = e.dataTransfer?.files?.[0];
+              if (!file || !photoInputRef.current) return;
+              const dt = new DataTransfer();
+              dt.items.add(file);
+              photoInputRef.current.files = dt.files;
+              photoInputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+            },
             style: {
               flex: 1,
               display: "flex",
@@ -25397,6 +25903,30 @@ function BodyProfileView({
               if (!photoPreview && ageConfirmed === true) setUploadHover(true);
             },
             onMouseLeave: () => setUploadHover(false),
+            onDragEnter: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            onDragOver: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+            },
+            onDragLeave: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            },
+            onDrop: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (photoPreview || ageConfirmed !== true) return;
+              const file = e.dataTransfer?.files?.[0];
+              if (!file || !fileInputRef.current) return;
+              const dt = new DataTransfer();
+              dt.items.add(file);
+              fileInputRef.current.files = dt.files;
+              fileInputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+            },
             style: {
               flex: 1,
               display: "flex",
@@ -25690,7 +26220,7 @@ function BodyProfileView({
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: { margin: "0.2vw 0 0", fontSize: "0.65vw", color: "var(--ps-text-muted)" }, children: t2("These calibrate the AI — all required.") })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-system-toggle", style: { alignSelf: "center" }, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-system-toggle", style: { alignSelf: "center", marginTop: "1.2vw" }, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `ps-bp-system-btn${!isImperialMode ? " ps-bp-system-active" : ""}`, onClick: photoSwitchToMetric, type: "button", children: t2("Metric") }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `ps-bp-system-btn${isImperialMode ? " ps-bp-system-active" : ""}`, onClick: photoSwitchToImperial, type: "button", children: t2("Imperial") })
           ] }),
@@ -29200,12 +29730,27 @@ function PrimeStyleTryonInner({
           {
             productImage,
             productTitle,
-            onTryOn: () => setView("body-profile"),
+            onTryOn: () => setView("photo-guide"),
             onClose: onClose ?? (() => {
             }),
             t: t2
           }
         ) }, "v-nochart");
+      case "photo-guide":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          PhotoGuideView,
+          {
+            measurementType: detectMeasurementType(productTitle),
+            apiUrl: getApiUrl(apiUrl),
+            apiKey: getApiKey(),
+            onBack: () => setView("no-chart"),
+            onSubmit: (file) => {
+              handleFileSelect(file);
+              handleTryOnSubmit(file);
+            },
+            t: t2
+          }
+        ) }, "v-photoguide");
       default:
         return null;
     }
@@ -29227,7 +29772,7 @@ function PrimeStyleTryonInner({
       }
     ),
     view !== "idle" && typeof document !== "undefined" && reactDomExports.createPortal(
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" || view === "no-chart" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx(`ps-tryon-modal${view === "result" && resultImageUrl && sizingResult || view === "size-result" || view === "estimation-review" || view === "body-profile" || view === "profiles" || view === "no-chart" || view === "photo-guide" ? " ps-tryon-modal-wide" : ""}`, cn.modal), onClick: (e) => e.stopPropagation(), children: [
         /* @__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: () => {

package/package.json

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