@primestyleai/tryon 5.8.5 → 5.8.7

package/dist/storefront/primestyle-tryon.js

@@ -10404,7 +10404,7 @@ const STYLES$1 = `
   /* ═══════════ V2 Redesign — Editorial luxury ═══════════ */
   .ps-tryon-v2 {
     display: flex; gap: 1.2vw; flex: 1; min-height: 0;
-    height: 28vw; overflow: hidden;
+    height: 100%; overflow: hidden;
   }
 
   /* Left image column — proper contained display */
@@ -16717,7 +16717,6 @@ function SizeResultView({
 }) {
   const unitLbl = sizingUnit === "cm" ? t2("cm") : t2("in");
   const [editVals, setEditVals] = reactExports.useState({});
-  const cleanNum = cleanNumFn;
   const pRange = pRangeFn;
   const cellVal = reactExports.useCallback((row, colIdx, header) => {
     return cellValFn(row, colIdx, header);
@@ -16826,8 +16825,7 @@ function SizeResultView({
     setGuidePreviewUrl(null);
   }, [guideFile]);
   const displaySize = selectedSize || origSize;
-  const isRecommended = displaySize === origSize;
-  const displayFitRows = reactExports.useMemo(() => {
+  reactExports.useMemo(() => {
     if (!sizingResult?.matchDetails?.length) return [];
     const seen = /* @__PURE__ */ new Set();
     const unique = sizingResult.matchDetails.filter((m2) => {
@@ -16861,7 +16859,7 @@ function SizeResultView({
       return { area: m2.measurement, userNum: pNumFn(m2.userValue), chartLabel, fit };
     });
   }, [sizingResult, displaySize, origSize, chartRangeFor]);
-  const sizeGuideRow = reactExports.useMemo(() => {
+  reactExports.useMemo(() => {
     if (!sizeGuide?.headers || !sizeGuide?.rows || sizeColIdx < 0) return null;
     const row = sizeGuide.rows.find((r2) => cellVal(r2, sizeColIdx, sizeHeader) === displaySize);
     if (!row) return null;
@@ -17192,172 +17190,71 @@ function SizeResultView({
           ] }, "panel-results")
         ] })
       ) : (
-        /* ── SINGLE-PIECE — same layout as body profile ── */
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-layout", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-image", style: { position: "relative" }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-bp-image-img", onLoad: handleImgLoad }),
-            resultImageUrl && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-img-actions", children: [
-              resultImageUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-img-icon", onClick: handleDownload, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { marginRight: "0.2vw" }, 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: "7 10 12 15 17 10" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-                ] }),
-                t2("Download")
-              ] }),
-              sizeGuide?.found && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-img-icon", onClick: () => setShowFullChart(true), children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", style: { marginRight: "0.2vw" }, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m14.5 12.5 2-2" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m11.5 9.5 2-2" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m8.5 6.5 2-2" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m17.5 15.5 2-2" })
-                ] }),
-                t2("See full size chart")
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-root", style: { justifyContent: "flex-start" }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-size-hero", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-size-letter", children: displaySize }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-size-meta", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `ps-tryon-sr-size-label${isRecommended ? "" : " ps-not-rec"}`, children: isRecommended ? t2("RECOMMENDED SIZE") : t2("NOT RECOMMENDED") }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-edit-link", onClick: () => {
-                  setView("body-profile");
-                  setEditVals({});
-                  setSelectedSize(null);
-                }, children: t2("Edit measurements") })
+        /* ── SINGLE-PIECE — rendered via SectionDetailView for visual parity with multi-garment ── */
+        (() => {
+          const singleSection = sizeGuide?.found ? { headers: sizeGuide.headers || [], rows: sizeGuide.rows || [], requiredFields: sizeGuide.requiredFields || [] } : { headers: [], rows: [], requiredFields: [] };
+          const singleResult = { recommendedSize: sizingResult?.recommendedSize || "", matchDetails: sizingResult?.matchDetails || [] };
+          const singleUserMeasurements = {};
+          if (sizingResult?.matchDetails) {
+            for (const m2 of sizingResult.matchDetails) singleUserMeasurements[m2.measurement.toLowerCase()] = pNumFn(m2.userValue);
+          }
+          const sectionName = productTitle || t2("Size");
+          if (isMobile) {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SectionDetailView,
+              {
+                sectionName,
+                section: singleSection,
+                sectionResult: singleResult,
+                userMeasurements: singleUserMeasurements,
+                unitLbl,
+                lengthEntry: null,
+                onBack: () => setView("body-profile"),
+                productImage: resultImageUrl || productImage,
+                productTitle,
+                isMobile: true,
+                isTryOnImage: !!resultImageUrl,
+                showLines,
+                onToggleLines: () => setShowLines(!showLines),
+                onImageLoad: handleImgLoad,
+                overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  MeasurementOverlay,
+                  {
+                    lines: poseLines,
+                    fitRows: (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })),
+                    show: showLines,
+                    imgWidth: imgDims.w,
+                    imgHeight: imgDims.h
+                  }
+                ) : null,
+                t: t2
+              }
+            );
+          }
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
+              resultImageUrl && poseReady && poseLines && /* @__PURE__ */ jsxRuntimeExports.jsx(MeasurementOverlay, { lines: poseLines, fitRows: (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
+              resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t2("Hide Fit") : t2("Show Fit") }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: handleDownload, children: t2("Download") })
               ] })
             ] }),
-            (displayFitRows.length > 0 || sizeGuideRow) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-tabs", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: `ps-tryon-sr-tab${resultTab === "chart" ? " ps-active" : ""}`, onClick: () => setResultTab("chart"), children: [
-                t2("Size guide"),
-                " ",
-                displaySize
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `ps-tryon-sr-tab${resultTab === "fit" ? " ps-active" : ""}`, onClick: () => setResultTab("fit"), children: t2("Your fit") })
-            ] }),
-            resultTab === "fit" && displayFitRows.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "ps-tryon-sr-fit-table", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("th", {}),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: t2("You") }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: t2("Garment") }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: t2("Your fit") })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: displayFitRows.map((row, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "ps-tryon-sr-ft-area", children: row.area }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("td", { className: "ps-tryon-sr-ft-you", children: [
-                  row.userNum,
-                  " ",
-                  unitLbl
-                ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "ps-tryon-sr-ft-garment", children: row.chartLabel }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `ps-tryon-sr-fit-status ps-fit-${row.fit}`, children: fitLabelFn(row.fit, t2) }) })
-              ] }, i)) })
-            ] }),
-            resultTab === "chart" && sizeGuideRow && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-fit-list", children: sizeGuideRow.map((entry, i) => {
-              const raw = cleanNum(entry.value);
-              const isCmVal = /cm/i.test(entry.value) || /cm/i.test(entry.header);
-              const needConvert = isCmVal && sizingUnit === "in";
-              const nums = raw.split("–").map(Number).filter((n2) => !isNaN(n2));
-              const display = needConvert && nums.length > 0 ? nums.map((n2) => +(n2 / 2.54).toFixed(1)).join("–") : raw;
-              const isWeight = /weight|kg/i.test(entry.header);
-              const wUnit = isWeight ? /kg/i.test(entry.value) ? "kg" : "lbs" : unitLbl;
-              return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-fit-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-fit-head", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-fit-area", children: entry.header }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-sr-fit-range", children: [
-                  isWeight ? raw : display,
-                  " ",
-                  isWeight ? wUnit : unitLbl
-                ] })
-              ] }) }, i);
-            }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-chips", children: [
-              sizingResult.tightSize && sizingResult.tightSize !== origSize && sizingResult.tightSize !== sizingResult.looseSize && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "button",
-                {
-                  className: `ps-tryon-sr-chip${displaySize === sizingResult.tightSize ? " ps-active" : ""}`,
-                  onClick: () => setSelectedSize(sizingResult.tightSize),
-                  children: [
-                    sizingResult.tightSize,
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-chip-hint", children: t2("tighter") })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "button",
-                {
-                  className: `ps-tryon-sr-chip ps-recommended${displaySize === origSize ? " ps-active" : ""}`,
-                  onClick: () => setSelectedSize(null),
-                  children: [
-                    origSize,
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-rec-dot" })
-                  ]
-                }
-              ),
-              sizingResult.looseSize && sizingResult.looseSize !== origSize && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "button",
-                {
-                  className: `ps-tryon-sr-chip${displaySize === sizingResult.looseSize ? " ps-active" : ""}`,
-                  onClick: () => setSelectedSize(sizingResult.looseSize),
-                  children: [
-                    sizingResult.looseSize,
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-chip-hint", children: t2("looser") })
-                  ]
-                }
-              )
-            ] }),
-            displayFitRows.length === 0 && !sizeGuideRow && sizingResult.reasoning && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: sizingResult.reasoning }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-nav", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-back-btn", onClick: () => setView("body-profile"), type: "button", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
-                " ",
-                t2("Back")
-              ] }),
-              !resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-next-btn", onClick: () => {
-                setGuideFile(null);
-                setShowPhotoGuide(true);
-              }, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, { size: 14 }),
-                " ",
-                t2("Try It On")
-              ] }),
-              tryOnProcessing && !resultImageUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-next-btn", disabled: true, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "0.9vw", height: "0.9vw", borderWidth: "1.5px", display: "inline-block" } }),
-                " ",
-                t2("Processing...")
-              ] }),
-              resultImageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "button",
-                {
-                  className: "ps-bp-next-btn",
-                  disabled: retryLoading,
-                  onClick: () => {
-                    const fitInfo = (sizingResult?.matchDetails || []).map((m2) => ({
-                      area: m2.measurement,
-                      fit: m2.fit,
-                      userValue: parseFloat(m2.userValue) || void 0,
-                      garmentRange: m2.chartRange || void 0
-                    }));
-                    onRetryWithFit(fitInfo);
-                  },
-                  children: retryLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "0.9vw", height: "0.9vw", borderWidth: "1.5px", display: "inline-block" } }),
-                    " ",
-                    t2("Generating...")
-                  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, { size: 14 }),
-                    " ",
-                    t2("Try on size"),
-                    " ",
-                    displaySize
-                  ] })
-                }
-              )
-            ] })
-          ] })
-        ] })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-v2-panel", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SectionDetailView,
+              {
+                sectionName,
+                section: singleSection,
+                sectionResult: singleResult,
+                userMeasurements: singleUserMeasurements,
+                unitLbl,
+                lengthEntry: null,
+                onBack: () => setView("body-profile"),
+                t: t2
+              }
+            ) }, "panel-single")
+          ] });
+        })()
       ),
       showPhotoGuide && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
         /* ── Mobile: same layout as the AI-sizing photo step
@@ -20159,7 +20056,8 @@ function PrimeStyleTryonInner({
         setView("body-profile");
         break;
       case "profiles":
-        handleClose();
+        setView(prevViewRef.current || "body-profile");
+        prevViewRef.current = null;
         break;
       default:
         handleClose();
@@ -21155,12 +21053,25 @@ function PrimeStyleTryonInner({
       /* @__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" ? " ps-tryon-modal-wide" : ""}${view === "profiles" ? " ps-tryon-modal-tall" : ""}`, 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: () => setView(view === "profiles" ? "body-profile" : "profiles"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(UserIcon, {}) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("Profiles"), onClick: () => {
+            if (drawer) setDrawer(null);
+            if (view === "profiles") {
+              setView(prevViewRef.current || "body-profile");
+              prevViewRef.current = null;
+            } else {
+              prevViewRef.current = view;
+              setView("profiles");
+            }
+          }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(UserIcon, {}) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("History"), onClick: () => {
+            if (view === "profiles") {
+              setView(prevViewRef.current || "body-profile");
+              prevViewRef.current = null;
+            }
             if (drawer === "history") {
               setDrawer(null);
             } else {
-              prevViewRef.current = view;
+              prevViewRef.current = prevViewRef.current || view;
               setDrawer("history");
             }
           }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClockIcon, {}) }),

package/package.json

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