@primestyleai/tryon 5.8.5 → 5.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/index.js +83 -172
- package/dist/react/styles.d.ts +1 -1
- package/dist/storefront/primestyle-tryon.js +83 -172
- package/package.json +1 -1
package/dist/react/index.js
CHANGED
|
@@ -980,7 +980,7 @@ const STYLES = `
|
|
|
980
980
|
/* ═══════════ V2 Redesign — Editorial luxury ═══════════ */
|
|
981
981
|
.ps-tryon-v2 {
|
|
982
982
|
display: flex; gap: 1.2vw; flex: 1; min-height: 0;
|
|
983
|
-
height:
|
|
983
|
+
height: 100%; overflow: hidden;
|
|
984
984
|
}
|
|
985
985
|
|
|
986
986
|
/* Left image column — proper contained display */
|
|
@@ -7293,7 +7293,6 @@ function SizeResultView({
|
|
|
7293
7293
|
}) {
|
|
7294
7294
|
const unitLbl = sizingUnit === "cm" ? t("cm") : t("in");
|
|
7295
7295
|
const [editVals, setEditVals] = useState({});
|
|
7296
|
-
const cleanNum = cleanNumFn;
|
|
7297
7296
|
const pRange = pRangeFn;
|
|
7298
7297
|
const cellVal = useCallback((row, colIdx, header) => {
|
|
7299
7298
|
return cellValFn(row, colIdx, header);
|
|
@@ -7402,8 +7401,7 @@ function SizeResultView({
|
|
|
7402
7401
|
setGuidePreviewUrl(null);
|
|
7403
7402
|
}, [guideFile]);
|
|
7404
7403
|
const displaySize = selectedSize || origSize;
|
|
7405
|
-
|
|
7406
|
-
const displayFitRows = useMemo(() => {
|
|
7404
|
+
useMemo(() => {
|
|
7407
7405
|
if (!sizingResult?.matchDetails?.length) return [];
|
|
7408
7406
|
const seen = /* @__PURE__ */ new Set();
|
|
7409
7407
|
const unique = sizingResult.matchDetails.filter((m) => {
|
|
@@ -7437,7 +7435,7 @@ function SizeResultView({
|
|
|
7437
7435
|
return { area: m.measurement, userNum: pNumFn(m.userValue), chartLabel, fit };
|
|
7438
7436
|
});
|
|
7439
7437
|
}, [sizingResult, displaySize, origSize, chartRangeFor]);
|
|
7440
|
-
|
|
7438
|
+
useMemo(() => {
|
|
7441
7439
|
if (!sizeGuide?.headers || !sizeGuide?.rows || sizeColIdx < 0) return null;
|
|
7442
7440
|
const row = sizeGuide.rows.find((r) => cellVal(r, sizeColIdx, sizeHeader) === displaySize);
|
|
7443
7441
|
if (!row) return null;
|
|
@@ -7768,172 +7766,71 @@ function SizeResultView({
|
|
|
7768
7766
|
] }, "panel-results")
|
|
7769
7767
|
] })
|
|
7770
7768
|
) : (
|
|
7771
|
-
/* ── SINGLE-PIECE —
|
|
7772
|
-
|
|
7773
|
-
|
|
7774
|
-
|
|
7775
|
-
|
|
7776
|
-
|
|
7777
|
-
|
|
7778
|
-
|
|
7779
|
-
|
|
7780
|
-
|
|
7781
|
-
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
|
|
7785
|
-
|
|
7786
|
-
|
|
7787
|
-
|
|
7788
|
-
|
|
7789
|
-
|
|
7790
|
-
|
|
7791
|
-
|
|
7792
|
-
|
|
7793
|
-
|
|
7794
|
-
|
|
7795
|
-
|
|
7796
|
-
|
|
7797
|
-
|
|
7798
|
-
|
|
7799
|
-
|
|
7800
|
-
|
|
7801
|
-
|
|
7802
|
-
|
|
7803
|
-
|
|
7804
|
-
|
|
7805
|
-
|
|
7806
|
-
|
|
7769
|
+
/* ── SINGLE-PIECE — rendered via SectionDetailView for visual parity with multi-garment ── */
|
|
7770
|
+
(() => {
|
|
7771
|
+
const singleSection = sizeGuide?.found ? { headers: sizeGuide.headers || [], rows: sizeGuide.rows || [], requiredFields: sizeGuide.requiredFields || [] } : { headers: [], rows: [], requiredFields: [] };
|
|
7772
|
+
const singleResult = { recommendedSize: sizingResult?.recommendedSize || "", matchDetails: sizingResult?.matchDetails || [] };
|
|
7773
|
+
const singleUserMeasurements = {};
|
|
7774
|
+
if (sizingResult?.matchDetails) {
|
|
7775
|
+
for (const m of sizingResult.matchDetails) singleUserMeasurements[m.measurement.toLowerCase()] = pNumFn(m.userValue);
|
|
7776
|
+
}
|
|
7777
|
+
const sectionName = productTitle || t("Size");
|
|
7778
|
+
if (isMobile) {
|
|
7779
|
+
return /* @__PURE__ */ jsx(
|
|
7780
|
+
SectionDetailView,
|
|
7781
|
+
{
|
|
7782
|
+
sectionName,
|
|
7783
|
+
section: singleSection,
|
|
7784
|
+
sectionResult: singleResult,
|
|
7785
|
+
userMeasurements: singleUserMeasurements,
|
|
7786
|
+
unitLbl,
|
|
7787
|
+
lengthEntry: null,
|
|
7788
|
+
onBack: () => setView("body-profile"),
|
|
7789
|
+
productImage: resultImageUrl || productImage,
|
|
7790
|
+
productTitle,
|
|
7791
|
+
isMobile: true,
|
|
7792
|
+
isTryOnImage: !!resultImageUrl,
|
|
7793
|
+
showLines,
|
|
7794
|
+
onToggleLines: () => setShowLines(!showLines),
|
|
7795
|
+
onImageLoad: handleImgLoad,
|
|
7796
|
+
overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsx(
|
|
7797
|
+
MeasurementOverlay,
|
|
7798
|
+
{
|
|
7799
|
+
lines: poseLines,
|
|
7800
|
+
fitRows: (sizingResult?.matchDetails || []).map((m) => ({ area: m.measurement, userNum: parseFloat(m.userValue) || 0, chartLabel: m.chartRange || "", fit: m.fit })),
|
|
7801
|
+
show: showLines,
|
|
7802
|
+
imgWidth: imgDims.w,
|
|
7803
|
+
imgHeight: imgDims.h
|
|
7804
|
+
}
|
|
7805
|
+
) : null,
|
|
7806
|
+
t
|
|
7807
|
+
}
|
|
7808
|
+
);
|
|
7809
|
+
}
|
|
7810
|
+
return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2", children: [
|
|
7811
|
+
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
|
|
7812
|
+
/* @__PURE__ */ jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
|
|
7813
|
+
resultImageUrl && poseReady && poseLines && /* @__PURE__ */ jsx(MeasurementOverlay, { lines: poseLines, fitRows: (sizingResult?.matchDetails || []).map((m) => ({ area: m.measurement, userNum: parseFloat(m.userValue) || 0, chartLabel: m.chartRange || "", fit: m.fit })), show: showLines, imgWidth: imgDims.w, imgHeight: imgDims.h }),
|
|
7814
|
+
resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxs("div", { style: { position: "absolute", bottom: "0.5vw", left: "0.5vw", zIndex: 3, display: "flex", flexDirection: "column", gap: "0.3vw" }, children: [
|
|
7815
|
+
/* @__PURE__ */ jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t("Hide Fit") : t("Show Fit") }),
|
|
7816
|
+
/* @__PURE__ */ jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: handleDownload, children: t("Download") })
|
|
7807
7817
|
] })
|
|
7808
7818
|
] }),
|
|
7809
|
-
|
|
7810
|
-
|
|
7811
|
-
|
|
7812
|
-
|
|
7813
|
-
|
|
7814
|
-
|
|
7815
|
-
|
|
7816
|
-
|
|
7817
|
-
|
|
7818
|
-
|
|
7819
|
-
|
|
7820
|
-
|
|
7821
|
-
|
|
7822
|
-
|
|
7823
|
-
|
|
7824
|
-
/* @__PURE__ */ jsx("tbody", { children: displayFitRows.map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
|
|
7825
|
-
/* @__PURE__ */ jsx("td", { className: "ps-tryon-sr-ft-area", children: row.area }),
|
|
7826
|
-
/* @__PURE__ */ jsxs("td", { className: "ps-tryon-sr-ft-you", children: [
|
|
7827
|
-
row.userNum,
|
|
7828
|
-
" ",
|
|
7829
|
-
unitLbl
|
|
7830
|
-
] }),
|
|
7831
|
-
/* @__PURE__ */ jsx("td", { className: "ps-tryon-sr-ft-garment", children: row.chartLabel }),
|
|
7832
|
-
/* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fit-status ps-fit-${row.fit}`, children: fitLabelFn(row.fit, t) }) })
|
|
7833
|
-
] }, i)) })
|
|
7834
|
-
] }),
|
|
7835
|
-
resultTab === "chart" && sizeGuideRow && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fit-list", children: sizeGuideRow.map((entry, i) => {
|
|
7836
|
-
const raw = cleanNum(entry.value);
|
|
7837
|
-
const isCmVal = /cm/i.test(entry.value) || /cm/i.test(entry.header);
|
|
7838
|
-
const needConvert = isCmVal && sizingUnit === "in";
|
|
7839
|
-
const nums = raw.split("–").map(Number).filter((n) => !isNaN(n));
|
|
7840
|
-
const display = needConvert && nums.length > 0 ? nums.map((n) => +(n / 2.54).toFixed(1)).join("–") : raw;
|
|
7841
|
-
const isWeight = /weight|kg/i.test(entry.header);
|
|
7842
|
-
const wUnit = isWeight ? /kg/i.test(entry.value) ? "kg" : "lbs" : unitLbl;
|
|
7843
|
-
return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-fit-item", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-head", children: [
|
|
7844
|
-
/* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-area", children: entry.header }),
|
|
7845
|
-
/* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-range", children: [
|
|
7846
|
-
isWeight ? raw : display,
|
|
7847
|
-
" ",
|
|
7848
|
-
isWeight ? wUnit : unitLbl
|
|
7849
|
-
] })
|
|
7850
|
-
] }) }, i);
|
|
7851
|
-
}) }),
|
|
7852
|
-
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-chips", children: [
|
|
7853
|
-
sizingResult.tightSize && sizingResult.tightSize !== origSize && sizingResult.tightSize !== sizingResult.looseSize && /* @__PURE__ */ jsxs(
|
|
7854
|
-
"button",
|
|
7855
|
-
{
|
|
7856
|
-
className: `ps-tryon-sr-chip${displaySize === sizingResult.tightSize ? " ps-active" : ""}`,
|
|
7857
|
-
onClick: () => setSelectedSize(sizingResult.tightSize),
|
|
7858
|
-
children: [
|
|
7859
|
-
sizingResult.tightSize,
|
|
7860
|
-
/* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-chip-hint", children: t("tighter") })
|
|
7861
|
-
]
|
|
7862
|
-
}
|
|
7863
|
-
),
|
|
7864
|
-
/* @__PURE__ */ jsxs(
|
|
7865
|
-
"button",
|
|
7866
|
-
{
|
|
7867
|
-
className: `ps-tryon-sr-chip ps-recommended${displaySize === origSize ? " ps-active" : ""}`,
|
|
7868
|
-
onClick: () => setSelectedSize(null),
|
|
7869
|
-
children: [
|
|
7870
|
-
origSize,
|
|
7871
|
-
/* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-rec-dot" })
|
|
7872
|
-
]
|
|
7873
|
-
}
|
|
7874
|
-
),
|
|
7875
|
-
sizingResult.looseSize && sizingResult.looseSize !== origSize && /* @__PURE__ */ jsxs(
|
|
7876
|
-
"button",
|
|
7877
|
-
{
|
|
7878
|
-
className: `ps-tryon-sr-chip${displaySize === sizingResult.looseSize ? " ps-active" : ""}`,
|
|
7879
|
-
onClick: () => setSelectedSize(sizingResult.looseSize),
|
|
7880
|
-
children: [
|
|
7881
|
-
sizingResult.looseSize,
|
|
7882
|
-
/* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-chip-hint", children: t("looser") })
|
|
7883
|
-
]
|
|
7884
|
-
}
|
|
7885
|
-
)
|
|
7886
|
-
] }),
|
|
7887
|
-
displayFitRows.length === 0 && !sizeGuideRow && sizingResult.reasoning && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) }),
|
|
7888
|
-
/* @__PURE__ */ jsxs("div", { className: "ps-bp-nav", children: [
|
|
7889
|
-
/* @__PURE__ */ jsxs("button", { className: "ps-bp-back-btn", onClick: () => setView("body-profile"), type: "button", children: [
|
|
7890
|
-
/* @__PURE__ */ jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
|
|
7891
|
-
" ",
|
|
7892
|
-
t("Back")
|
|
7893
|
-
] }),
|
|
7894
|
-
!resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxs("button", { className: "ps-bp-next-btn", onClick: () => {
|
|
7895
|
-
setGuideFile(null);
|
|
7896
|
-
setShowPhotoGuide(true);
|
|
7897
|
-
}, children: [
|
|
7898
|
-
/* @__PURE__ */ jsx(CameraIcon$1, { size: 14 }),
|
|
7899
|
-
" ",
|
|
7900
|
-
t("Try It On")
|
|
7901
|
-
] }),
|
|
7902
|
-
tryOnProcessing && !resultImageUrl && /* @__PURE__ */ jsxs("button", { className: "ps-bp-next-btn", disabled: true, children: [
|
|
7903
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "0.9vw", height: "0.9vw", borderWidth: "1.5px", display: "inline-block" } }),
|
|
7904
|
-
" ",
|
|
7905
|
-
t("Processing...")
|
|
7906
|
-
] }),
|
|
7907
|
-
resultImageUrl && /* @__PURE__ */ jsx(
|
|
7908
|
-
"button",
|
|
7909
|
-
{
|
|
7910
|
-
className: "ps-bp-next-btn",
|
|
7911
|
-
disabled: retryLoading,
|
|
7912
|
-
onClick: () => {
|
|
7913
|
-
const fitInfo = (sizingResult?.matchDetails || []).map((m) => ({
|
|
7914
|
-
area: m.measurement,
|
|
7915
|
-
fit: m.fit,
|
|
7916
|
-
userValue: parseFloat(m.userValue) || void 0,
|
|
7917
|
-
garmentRange: m.chartRange || void 0
|
|
7918
|
-
}));
|
|
7919
|
-
onRetryWithFit(fitInfo);
|
|
7920
|
-
},
|
|
7921
|
-
children: retryLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7922
|
-
/* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "0.9vw", height: "0.9vw", borderWidth: "1.5px", display: "inline-block" } }),
|
|
7923
|
-
" ",
|
|
7924
|
-
t("Generating...")
|
|
7925
|
-
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
7926
|
-
/* @__PURE__ */ jsx(CameraIcon$1, { size: 14 }),
|
|
7927
|
-
" ",
|
|
7928
|
-
t("Try on size"),
|
|
7929
|
-
" ",
|
|
7930
|
-
displaySize
|
|
7931
|
-
] })
|
|
7932
|
-
}
|
|
7933
|
-
)
|
|
7934
|
-
] })
|
|
7935
|
-
] })
|
|
7936
|
-
] })
|
|
7819
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-v2-panel", children: /* @__PURE__ */ jsx(
|
|
7820
|
+
SectionDetailView,
|
|
7821
|
+
{
|
|
7822
|
+
sectionName,
|
|
7823
|
+
section: singleSection,
|
|
7824
|
+
sectionResult: singleResult,
|
|
7825
|
+
userMeasurements: singleUserMeasurements,
|
|
7826
|
+
unitLbl,
|
|
7827
|
+
lengthEntry: null,
|
|
7828
|
+
onBack: () => setView("body-profile"),
|
|
7829
|
+
t
|
|
7830
|
+
}
|
|
7831
|
+
) }, "panel-single")
|
|
7832
|
+
] });
|
|
7833
|
+
})()
|
|
7937
7834
|
),
|
|
7938
7835
|
showPhotoGuide && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
|
|
7939
7836
|
/* ── Mobile: same layout as the AI-sizing photo step
|
|
@@ -10735,7 +10632,8 @@ function PrimeStyleTryonInner({
|
|
|
10735
10632
|
setView("body-profile");
|
|
10736
10633
|
break;
|
|
10737
10634
|
case "profiles":
|
|
10738
|
-
|
|
10635
|
+
setView(prevViewRef.current || "body-profile");
|
|
10636
|
+
prevViewRef.current = null;
|
|
10739
10637
|
break;
|
|
10740
10638
|
default:
|
|
10741
10639
|
handleClose();
|
|
@@ -11731,12 +11629,25 @@ function PrimeStyleTryonInner({
|
|
|
11731
11629
|
/* @__PURE__ */ jsx("div", { className: cx("ps-tryon-overlay", cn.overlay), style: cssVars, "data-ps-tryon-portal": true, children: /* @__PURE__ */ 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: [
|
|
11732
11630
|
/* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
|
|
11733
11631
|
/* @__PURE__ */ jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
|
|
11734
|
-
/* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () =>
|
|
11632
|
+
/* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("Profiles"), onClick: () => {
|
|
11633
|
+
if (drawer) setDrawer(null);
|
|
11634
|
+
if (view === "profiles") {
|
|
11635
|
+
setView(prevViewRef.current || "body-profile");
|
|
11636
|
+
prevViewRef.current = null;
|
|
11637
|
+
} else {
|
|
11638
|
+
prevViewRef.current = view;
|
|
11639
|
+
setView("profiles");
|
|
11640
|
+
}
|
|
11641
|
+
}, children: /* @__PURE__ */ jsx(UserIcon, {}) }),
|
|
11735
11642
|
/* @__PURE__ */ jsx("button", { className: "ps-tryon-header-icon", title: t("History"), onClick: () => {
|
|
11643
|
+
if (view === "profiles") {
|
|
11644
|
+
setView(prevViewRef.current || "body-profile");
|
|
11645
|
+
prevViewRef.current = null;
|
|
11646
|
+
}
|
|
11736
11647
|
if (drawer === "history") {
|
|
11737
11648
|
setDrawer(null);
|
|
11738
11649
|
} else {
|
|
11739
|
-
prevViewRef.current = view;
|
|
11650
|
+
prevViewRef.current = prevViewRef.current || view;
|
|
11740
11651
|
setDrawer("history");
|
|
11741
11652
|
}
|
|
11742
11653
|
}, children: /* @__PURE__ */ jsx(ClockIcon, {}) }),
|