@primestyleai/tryon 5.10.100 → 5.10.102

package/dist/react/views/PhotoGuideView.d.ts

@@ -7,8 +7,11 @@ import type { TranslateFn } from "../../i18n";
  * Desktop: split — photo upload on the left, Do/Don't/Pro-Tip on the right.
  * Mobile: stacked — title + preview + checklist + START TRY-ON.
  */
-export declare function PhotoGuideView({ measurementType, onBack, onSubmit, t, }: {
+export declare function PhotoGuideView({ measurementType, apiUrl, apiKey, onBack, onSubmit, t, }: {
     measurementType?: "body" | "face" | "head" | "foot";
+    /** Backend URL for the age-check call (passed through to PhotoUploadZone). */
+    apiUrl?: string;
+    apiKey?: string;
     onBack: () => void;
     onSubmit: (file: File) => void;
     t: TranslateFn;

package/dist/react/views/PhotoUploadZone.d.ts

@@ -0,0 +1,42 @@
+import type { TranslateFn } from "../../i18n";
+/**
+ * Single source of truth for photo upload UX across the SDK. Handles:
+ *   • drag / drop (with proper enter+over+leave+drop handlers — drop fails
+ *     silently in Chromium without preventDefault on every event)
+ *   • click-to-open file picker
+ *   • optional Gemini age-check (when apiUrl + apiKey are supplied)
+ *   • size + type validation
+ *   • internal preview, processing spinner, rejection card
+ *
+ * Used by PhotoGuideView, SizeResultView's photo-guide overlay, and any
+ * other place a customer is asked for a photo. Replaces the duplicated
+ * handlePhotoSelect blocks in BodyProfileView / CreateProfileWizard /
+ * AccessorySizeView (incrementally — those still have their own state).
+ */
+export type PhotoUploadZoneVariant = "block" | "inline";
+export declare function PhotoUploadZone({ apiUrl, apiKey, previewUrl, requireAgeConfirm, ageConfirmed, disabled, hintLine, emptyTitle, variant, onPhotoAccepted, onClearPhoto, t, }: {
+    /** When provided with apiKey, runs Gemini age-check before accepting. */
+    apiUrl?: string;
+    apiKey?: string;
+    /** External preview URL (e.g. parent already has a previewUrl from an
+     *  earlier flow). Pass null to render the empty drop state. */
+    previewUrl?: string | null;
+    /** When true, the zone refuses uploads until ageConfirmed is true. */
+    requireAgeConfirm?: boolean;
+    ageConfirmed?: boolean;
+    /** Disables click + drop (e.g. while parent is processing). */
+    disabled?: boolean;
+    /** Optional copy under the empty-state title. */
+    hintLine?: string;
+    /** Custom empty-state title. Defaults to "Upload your photo". */
+    emptyTitle?: string;
+    /** "block" (default) — full upload card with title/hint/icon.
+     *  "inline" — just the drop area sized to its parent (preview-only). */
+    variant?: PhotoUploadZoneVariant;
+    /** Called with the validated File once it passes age-check + size/type
+     *  validation. Parent is responsible for compressing or sending it. */
+    onPhotoAccepted: (file: File) => void;
+    /** Called when the user removes the current photo (via the X on preview). */
+    onClearPhoto?: () => void;
+    t: TranslateFn;
+}): import("react/jsx-runtime").JSX.Element;

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: [
@@ -18675,26 +18779,19 @@ function EngagingTryOnView({
     }, 200);
     return () => clearInterval(id2);
   }, []);
-  const aiFacts = [
-    t2("Our model is analyzing 150+ body landmarks for the perfect fit"),
-    t2("Calibrating fabric drape against your body proportions"),
-    t2("Cross-checking fit against millions of garment patterns"),
-    t2("Rendering shadows and highlights to match your photo's lighting")
-  ];
+  const aiFact = t2("Our model is analyzing 150+ body landmarks for the perfect fit");
   const styleTips = [
-    t2("Pair this with neutral tones for a balanced look"),
-    t2("Layer with a fitted base for sharper silhouette"),
-    t2("Cuff once for a relaxed everyday feel")
+    t2("Match your belt to your shoes — never your pants"),
+    t2("Leave the bottom button of a suit jacket undone"),
+    t2("Cuff a pocket square so it peeks 1–2 cm above the pocket"),
+    t2("Roll sleeves twice for a relaxed, intentional finish"),
+    t2("A tie tip should land at the middle of your belt buckle"),
+    t2("Cufflinks should sit half an inch past the jacket sleeve")
   ];
-  const [factIdx, setFactIdx] = reactExports.useState(0);
   const [tipIdx, setTipIdx] = reactExports.useState(0);
   reactExports.useEffect(() => {
-    const f2 = setInterval(() => setFactIdx((i) => (i + 1) % aiFacts.length), 4e3);
     const s = setInterval(() => setTipIdx((i) => (i + 1) % styleTips.length), 5e3);
-    return () => {
-      clearInterval(f2);
-      clearInterval(s);
-    };
+    return () => clearInterval(s);
   }, []);
   const garmentLine = productMaterial?.trim() || (productDescription?.trim() ? productDescription.trim().slice(0, 90) + (productDescription.trim().length > 90 ? "…" : "") : null) || t2("Crafted with quality materials for everyday comfort");
   const Panel = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-panel", children: [
@@ -18747,7 +18844,7 @@ function EngagingTryOnView({
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-icon ps-fact", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M12 2v6M12 16v6M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M16 12h6M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24" }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-processing-v2-card-text", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-head", children: t2("AI Fact") }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: aiFacts[factIdx] }, factIdx)
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-processing-v2-card-body", children: aiFact })
           ] })
         ] })
       ] })
@@ -21928,8 +22025,191 @@ 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
@@ -21937,8 +22217,6 @@ function PhotoGuideView({
   const isMobile = useIsMobile();
   const [guideFile, setGuideFile] = reactExports.useState(null);
   const [guidePreviewUrl, setGuidePreviewUrl] = reactExports.useState(null);
-  const [, setGuideDragOver] = reactExports.useState(false);
-  const guideInputRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (!guideFile) {
       setGuidePreviewUrl(null);
@@ -21958,49 +22236,17 @@ function PhotoGuideView({
         /* @__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(
-        "input",
-        {
-          ref: guideInputRef,
-          type: "file",
-          accept: "image/jpeg,image/png,image/webp",
-          style: { display: "none" },
-          onChange: (e) => {
-            const f2 = e.target.files?.[0];
-            if (f2) setGuideFile(f2);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-preview", children: guideFile && guidePreviewUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: guidePreviewUrl, alt: t2("Your photo"), className: "ps-pm-preview-img" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            className: "ps-pm-preview-remove",
-            onClick: () => setGuideFile(null),
-            "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" })
-            ] })
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-pm-preview", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PhotoUploadZone,
         {
-          type: "button",
-          className: "ps-pm-preview-empty",
-          onClick: () => guideInputRef.current?.click(),
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", width: "32", height: "32", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "17 8 12 3 7 8" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-pm-preview-empty-title", children: t2("Tap to upload") }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-pm-preview-empty-hint", children: t2("JPEG, PNG up to 10MB") })
-          ]
+          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: [
@@ -22039,7 +22285,7 @@ function PhotoGuideView({
           {
             type: "button",
             className: "ps-pm-secondary-btn",
-            onClick: () => guideInputRef.current?.click(),
+            onClick: () => setGuideFile(null),
             children: t2("RETAKE PHOTO")
           }
         ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -22056,60 +22302,20 @@ function PhotoGuideView({
   }
   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.jsxs(
-        "div",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: 1, display: "flex", minHeight: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PhotoUploadZone,
         {
-          onClick: () => guideInputRef.current?.click(),
-          onDragOver: (e) => {
-            e.preventDefault();
-            setGuideDragOver(true);
-          },
-          onDragLeave: () => setGuideDragOver(false),
-          onDrop: (e) => {
-            e.preventDefault();
-            setGuideDragOver(false);
-            const f2 = e.dataTransfer.files[0];
-            if (f2) setGuideFile(f2);
-          },
-          style: {
-            flex: 1,
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            justifyContent: "center",
-            border: guideFile ? "none" : "2px dashed var(--ps-border-color)",
-            borderRadius: "0.5vw",
-            cursor: "pointer",
-            position: "relative",
-            background: "var(--ps-bg-secondary)",
-            overflow: "hidden"
-          },
-          className: "ps-tryon-upload-hover",
-          children: [
-            guideFile && guidePreviewUrl ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: guidePreviewUrl, alt: "preview", style: { width: "100%", height: "100%", objectFit: "contain" } }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-upload-hover-overlay", style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", background: "rgba(0,0,0,0.4)", opacity: 0, transition: "opacity 0.2s", borderRadius: "0.5vw" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#fff", fontSize: "0.8vw", fontWeight: 600 }, children: t2("Click to change photo") }) })
-            ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(UploadIcon, { size: 32 }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.85vw", fontWeight: 600, color: "var(--ps-text-primary)", marginTop: "0.5vw" }, children: t2("Upload your photo") }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontSize: "0.6vw", color: "var(--ps-text-muted)", marginTop: "0.2vw" }, children: 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") })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "input",
-              {
-                ref: guideInputRef,
-                type: "file",
-                accept: "image/jpeg,image/png,image/webp",
-                style: { display: "none" },
-                onChange: (e) => {
-                  const f2 = e.target.files?.[0];
-                  if (f2) setGuideFile(f2);
-                }
-              }
-            )
-          ]
+          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: [
@@ -23183,6 +23389,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",
@@ -25666,6 +25896,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",
@@ -25959,7 +26213,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") })
           ] }),
@@ -29480,6 +29734,8 @@ function PrimeStyleTryonInner({
           PhotoGuideView,
           {
             measurementType: detectMeasurementType(productTitle),
+            apiUrl: getApiUrl(apiUrl),
+            apiKey: getApiKey(),
             onBack: () => setView("no-chart"),
             onSubmit: (file) => {
               handleFileSelect(file);

package/package.json

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