@primestyleai/tryon 5.5.12 → 5.5.14

package/dist/react/index.js

@@ -3107,7 +3107,9 @@ const STYLES = `
     flex-shrink: 0;
   }
   .ps-pm-preview-img {
-    width: 100%; height: 100%; object-fit: cover; display: block;
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain; display: block;
   }
   .ps-pm-preview-empty {
     display: flex; flex-direction: column; align-items: center;
@@ -3169,10 +3171,10 @@ const STYLES = `
     color: var(--ps-text-muted);
   }
 
-  /* Primary dark CTA: ANALYZE MY SIZE */
+  /* Primary CTA: ANALYZE MY SIZE — uses the user's brand accent */
   .ps-pm-primary-btn {
     margin: 0 16px; width: calc(100% - 32px);
-    background: var(--ps-text-primary); color: #FFFFFF;
+    background: var(--ps-accent); color: #FFFFFF;
     border: none; border-radius: 8px;
     padding: 16px 18px;
     font-family: inherit; font-size: 13px; font-weight: 700;
@@ -3201,6 +3203,166 @@ const STYLES = `
      baked in via .ps-bpm-next-btn). Both share .ps-bpm-bottom container. */
   .ps-bpm-bottom .ps-pm-primary-btn { margin: 14px 16px 0; }
 
+  /* ════════════════════════════════════════════════════════════════
+     MobileScanningView (.ps-msc-*) — AI scan processing screen.
+     Dark photo viewfinder with corner brackets, scanning line, pose
+     skeleton overlay, cycling stage text below with slide-fade.
+     ════════════════════════════════════════════════════════════════ */
+  .ps-msc-root {
+    display: flex; flex-direction: column;
+    gap: 18px; padding: 8px 4px 0;
+    flex: 1; min-height: 0;
+  }
+
+  /* The dark viewfinder containing the photo + overlays */
+  .ps-msc-viewfinder {
+    position: relative; flex-shrink: 0;
+    background: #0E0F11; border-radius: 12px; overflow: hidden;
+    height: 64vh; max-height: 540px; min-height: 360px;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .ps-msc-photo {
+    max-width: 100%; max-height: 100%;
+    width: auto; height: 100%;
+    object-fit: contain; display: block;
+    filter: brightness(0.9) contrast(1.05);
+  }
+
+  /* Live feed badge top-left */
+  .ps-msc-feed-badge {
+    position: absolute; top: 12px; left: 14px; z-index: 4;
+    display: flex; align-items: center; gap: 6px;
+    color: rgba(255,255,255,0.85);
+    font-size: 10px; font-weight: 600;
+    letter-spacing: 0.12em;
+    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  }
+  .ps-msc-feed-dot {
+    width: 7px; height: 7px; border-radius: 50%;
+    background: #ef4444;
+    box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
+    animation: ps-msc-rec 1.4s ease-in-out infinite;
+  }
+  @keyframes ps-msc-rec {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
+    50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(239,68,68,0); }
+  }
+
+  /* Corner brackets — four absolutely positioned L-shapes */
+  .ps-msc-corners {
+    position: absolute; inset: 28px;
+    pointer-events: none; z-index: 3;
+  }
+  .ps-msc-corner {
+    position: absolute;
+    width: 22px; height: 22px;
+    border: 1.5px solid rgba(255,255,255,0.7);
+  }
+  .ps-msc-corner.ps-tl { top: 0; left: 0; border-right: none; border-bottom: none; }
+  .ps-msc-corner.ps-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
+  .ps-msc-corner.ps-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
+  .ps-msc-corner.ps-br { bottom: 0; right: 0; border-left: none; border-top: none; }
+
+  /* Scanning line that sweeps top-to-bottom */
+  .ps-msc-scanline {
+    position: absolute; left: 28px; right: 28px;
+    height: 1.5px; z-index: 3;
+    background: linear-gradient(
+      to right,
+      transparent,
+      rgba(180,220,255,0.85),
+      rgba(180,220,255,0.85),
+      transparent
+    );
+    box-shadow: 0 0 8px rgba(180,220,255,0.5);
+    animation: ps-msc-scan 2.6s ease-in-out infinite;
+  }
+  @keyframes ps-msc-scan {
+    0%   { top: 28px; opacity: 0; }
+    10%  { opacity: 1; }
+    90%  { opacity: 1; }
+    100% { top: calc(100% - 28px); opacity: 0; }
+  }
+
+  /* Pose skeleton overlay — sits over the photo */
+  .ps-msc-pose-wrap {
+    position: absolute; inset: 0; z-index: 2;
+    display: flex; align-items: center; justify-content: center;
+    pointer-events: none;
+  }
+  .ps-msc-pose-overlay {
+    width: 100%; height: 100%;
+  }
+  @keyframes ps-msc-fade {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+  @keyframes ps-msc-pulse {
+    0%, 100% { transform: scale(1); opacity: 1; }
+    50%      { transform: scale(1.4); opacity: 0.5; }
+  }
+
+  /* Bottom of viewfinder: stage label + progress bar + sub */
+  .ps-msc-vf-bottom {
+    position: absolute; left: 28px; right: 28px; bottom: 28px;
+    z-index: 4; text-align: center;
+    color: #FFFFFF;
+  }
+  .ps-msc-vf-text {
+    font-size: 10px; font-weight: 700;
+    letter-spacing: 0.16em;
+    color: rgba(255,255,255,0.9);
+    margin-bottom: 6px;
+    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  }
+  .ps-msc-vf-bar {
+    height: 2px; width: 100%;
+    background: rgba(255,255,255,0.18);
+    border-radius: 2px; overflow: hidden;
+  }
+  .ps-msc-vf-bar-fill {
+    height: 100%; width: 30%;
+    background: linear-gradient(to right, rgba(180,220,255,0.6), rgba(255,255,255,0.95));
+    border-radius: 2px;
+    animation: ps-msc-bar 2.2s ease-in-out infinite;
+  }
+  @keyframes ps-msc-bar {
+    0%   { transform: translateX(-100%); }
+    50%  { transform: translateX(150%); }
+    100% { transform: translateX(350%); }
+  }
+  .ps-msc-vf-sub {
+    margin-top: 8px;
+    font-size: 9px; font-weight: 600;
+    letter-spacing: 0.18em;
+    color: rgba(255,255,255,0.55);
+    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  }
+
+  /* Cycling stage text below the viewfinder — slides + fades on change */
+  .ps-msc-stage {
+    text-align: center; padding: 4px 12px;
+    min-height: 64px;
+    overflow: hidden;
+  }
+  .ps-msc-stage-slot {
+    animation: ps-msc-stage-in 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  @keyframes ps-msc-stage-in {
+    from { opacity: 0; transform: translateY(14px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  .ps-msc-stage-title {
+    font-size: 16px; font-weight: 700;
+    letter-spacing: 0.06em;
+    color: var(--ps-text-primary);
+    margin-bottom: 6px;
+  }
+  .ps-msc-stage-desc {
+    font-size: 12px; color: var(--ps-text-muted);
+    line-height: 1.5; max-width: 300px; margin: 0 auto;
+  }
+
   /* Bottom action area — Next button + tab bar grouped together,
      pushed to the bottom of the modal body by .ps-bpm-spacer above. */
   .ps-bpm-bottom {
@@ -4185,6 +4347,216 @@ function EstimationReviewView({
     ] })
   ] });
 }
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const check = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  return isMobile;
+}
+function RulerIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
+  ] });
+}
+function ScanIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
+        onClick: onSwitchToManual,
+        children: [
+          /* @__PURE__ */ jsx(RulerIcon, {}),
+          t("MANUAL FIT")
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
+        onClick: onSwitchToScan,
+        children: [
+          /* @__PURE__ */ jsx(ScanIcon, {}),
+          t("AI SCAN")
+        ]
+      }
+    )
+  ] });
+}
+const SKELETON_CONNECTIONS$1 = [
+  ["leftShoulder", "rightShoulder"],
+  ["leftShoulder", "leftElbow"],
+  ["leftElbow", "leftWrist"],
+  ["rightShoulder", "rightElbow"],
+  ["rightElbow", "rightWrist"],
+  ["leftShoulder", "leftHip"],
+  ["rightShoulder", "rightHip"],
+  ["leftHip", "rightHip"],
+  ["leftHip", "leftKnee"],
+  ["leftKnee", "leftAnkle"],
+  ["rightHip", "rightKnee"],
+  ["rightKnee", "rightAnkle"]
+];
+function MobileSkeleton({ landmarks, w, h }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "ps-msc-pose-overlay",
+      viewBox: `0 0 ${w} ${h}`,
+      preserveAspectRatio: "xMidYMid meet",
+      children: [
+        SKELETON_CONNECTIONS$1.map(([a, b], i) => {
+          const pa = landmarks[a];
+          const pb = landmarks[b];
+          if (!pa || !pb) return null;
+          return /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: pa.x * w,
+              y1: pa.y * h,
+              x2: pb.x * w,
+              y2: pb.y * h,
+              stroke: "rgba(255,255,255,0.85)",
+              strokeWidth: "3",
+              strokeLinecap: "round",
+              opacity: 0,
+              style: { animation: `ps-msc-fade 0.4s ease ${i * 0.05}s forwards` }
+            },
+            `l-${i}`
+          );
+        }),
+        Object.entries(landmarks).map(([key, v], i) => /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: v.x * w,
+              cy: v.y * h,
+              r: 9,
+              fill: "rgba(255,255,255,0.18)",
+              opacity: 0,
+              style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: v.x * w,
+              cy: v.y * h,
+              r: 5,
+              fill: "#FFFFFF",
+              opacity: 0,
+              style: { animation: `ps-msc-fade 0.3s ease ${i * 0.04}s forwards, ps-msc-pulse 1.6s ease-in-out ${0.5 + i * 0.04}s infinite` }
+            }
+          )
+        ] }, key))
+      ]
+    }
+  );
+}
+function MobileScanningView({
+  previewUrl,
+  bodyLandmarks,
+  sizingDone,
+  onSwitchToManual,
+  t
+}) {
+  const stages = [
+    { title: t("DETECTING POSE"), desc: t("Identifying body landmarks from your photo."), viewfinderText: t("DETECTING POSE") },
+    { title: t("SCANNING FRAME"), desc: t("Our AI is mapping your proportions to calculate the perfect fit."), viewfinderText: t("SCANNING FRAME") },
+    { title: t("ANALYZING BODY"), desc: t("Measuring shoulders, chest, waist and hips."), viewfinderText: t("ANALYZING") },
+    { title: t("MATCHING SIZE"), desc: t("Comparing your measurements to the size guide."), viewfinderText: t("MATCHING SIZE") },
+    { title: t("FINALIZING RESULT"), desc: t("Almost done — preparing your recommendation."), viewfinderText: t("FINALIZING") }
+  ];
+  const [dims, setDims] = useState({ w: 800, h: 1200 });
+  const handleImgLoad = (e) => {
+    const img = e.currentTarget;
+    setDims({ w: img.naturalWidth || img.offsetWidth, h: img.naturalHeight || img.offsetHeight });
+  };
+  const [stageIdx, setStageIdx] = useState(0);
+  useEffect(() => {
+    if (sizingDone) return;
+    if (bodyLandmarks && stageIdx === 0) {
+      setStageIdx(1);
+      return;
+    }
+    const id = setInterval(() => {
+      setStageIdx((i) => Math.min(i + 1, stages.length - 1));
+    }, 1600);
+    return () => clearInterval(id);
+  }, [bodyLandmarks, sizingDone, stageIdx, stages.length]);
+  const current = stages[stageIdx] ?? stages[0];
+  const [feedTick, setFeedTick] = useState(1);
+  useEffect(() => {
+    if (sizingDone) return;
+    const id = setInterval(() => setFeedTick((n) => n + 1), 850);
+    return () => clearInterval(id);
+  }, [sizingDone]);
+  return /* @__PURE__ */ jsxs("div", { className: "ps-msc-root", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ps-msc-viewfinder", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-msc-feed-badge", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-feed-dot" }),
+        "LIVE_FEED:",
+        String(feedTick).padStart(2, "0")
+      ] }),
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: previewUrl,
+          alt: t("Your photo"),
+          className: "ps-msc-photo",
+          onLoad: handleImgLoad
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msc-corners", children: [
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-tl" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-tr" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-bl" }),
+        /* @__PURE__ */ jsx("span", { className: "ps-msc-corner ps-br" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-scanline" }),
+      bodyLandmarks && /* @__PURE__ */ jsx("div", { className: "ps-msc-pose-wrap", children: /* @__PURE__ */ jsx(MobileSkeleton, { landmarks: bodyLandmarks, w: dims.w, h: dims.h }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-bottom", children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-msc-vf-text", children: [
+          current.viewfinderText,
+          "..."
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-bar", children: /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-bar-fill" }) }),
+        /* @__PURE__ */ jsx("div", { className: "ps-msc-vf-sub", children: t("PLEASE STAND STILL") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ps-msc-stage", children: /* @__PURE__ */ jsxs("div", { className: "ps-msc-stage-slot", children: [
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-title", children: current.title }),
+      /* @__PURE__ */ jsx("div", { className: "ps-msc-stage-desc", children: current.desc })
+    ] }, stageIdx) }),
+    /* @__PURE__ */ jsx("div", { className: "ps-bpm-spacer" }),
+    /* @__PURE__ */ jsx("div", { className: "ps-bpm-bottom", children: /* @__PURE__ */ jsx(
+      MobileBottomTabs,
+      {
+        mode: "scan",
+        onSwitchToManual,
+        onSwitchToScan: () => {
+        },
+        t
+      }
+    ) })
+  ] });
+}
 const SKELETON_CONNECTIONS = [
   ["nose", "leftShoulder"],
   ["nose", "rightShoulder"],
@@ -4901,6 +5273,7 @@ function SizeResultView({
   const sizingDone = !!sizingResult;
   const tryOnDone = !!resultImageUrl && !tryOnProcessing;
   const allDone = hasPhoto ? sizingDone && tryOnDone : sizingDone;
+  const isMobile = useIsMobile();
   console.log("[PS-SDK] SizeResultView render:", {
     hasPhoto,
     isSnapProcessing,
@@ -4922,7 +5295,17 @@ function SizeResultView({
         /* @__PURE__ */ jsx("p", { style: { color: "var(--ps-text-muted)", fontSize: "0.8vw" }, children: t("Generating your size recommendation...") })
       ] })
     ] }),
-    isSnapProcessing && !allDone && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
+    isMobile && isSnapProcessing && !allDone && previewUrl && /* @__PURE__ */ jsx(
+      MobileScanningView,
+      {
+        previewUrl,
+        bodyLandmarks: bodyLandmarks ?? null,
+        sizingDone,
+        onSwitchToManual: () => setView("body-profile"),
+        t
+      }
+    ),
+    !isMobile && isSnapProcessing && !allDone && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-split", children: [
       /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-img-col", style: { position: "relative" }, children: [
         /* @__PURE__ */ jsx(
           "img",
@@ -5515,58 +5898,6 @@ function ResultView({ setView }) {
   }, []);
   return null;
 }
-const MOBILE_BREAKPOINT = 768;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const check = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    check();
-    window.addEventListener("resize", check);
-    return () => window.removeEventListener("resize", check);
-  }, []);
-  return isMobile;
-}
-function RulerIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 17l6 6 12-12-6-6z" }),
-    /* @__PURE__ */ jsx("path", { d: "M9 11l2 2M11 9l2 2M13 7l2 2M7 13l2 2" })
-  ] });
-}
-function ScanIcon() {
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", width: "13", height: "13", children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
-  ] });
-}
-function MobileBottomTabs({ mode, onSwitchToManual, onSwitchToScan, t }) {
-  return /* @__PURE__ */ jsxs("div", { className: "ps-bpm-bottom-tabs", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "manual" ? " ps-active" : ""}`,
-        onClick: onSwitchToManual,
-        children: [
-          /* @__PURE__ */ jsx(RulerIcon, {}),
-          t("MANUAL FIT")
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        className: `ps-bpm-bottom-tab${mode === "scan" ? " ps-active" : ""}`,
-        onClick: onSwitchToScan,
-        children: [
-          /* @__PURE__ */ jsx(ScanIcon, {}),
-          t("AI SCAN")
-        ]
-      }
-    )
-  ] });
-}
 function CameraSmallIcon({ size = 16 }) {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, children: [
     /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),