@primestyleai/tryon 5.8.5 → 5.8.6

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.
@@ -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
- const isRecommended = displaySize === origSize;
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
- const sizeGuideRow = useMemo(() => {
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 — same layout as body profile ── */
7772
- /* @__PURE__ */ jsxs("div", { className: "ps-bp-layout", children: [
7773
- /* @__PURE__ */ jsxs("div", { className: "ps-bp-image", style: { position: "relative" }, children: [
7774
- /* @__PURE__ */ jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-bp-image-img", onLoad: handleImgLoad }),
7775
- 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 }),
7776
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-img-actions", children: [
7777
- resultImageUrl && /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-img-icon", onClick: handleDownload, children: [
7778
- /* @__PURE__ */ 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: [
7779
- /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
7780
- /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
7781
- /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
7782
- ] }),
7783
- t("Download")
7784
- ] }),
7785
- sizeGuide?.found && /* @__PURE__ */ jsxs("button", { className: "ps-tryon-sr-img-icon", onClick: () => setShowFullChart(true), children: [
7786
- /* @__PURE__ */ 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: [
7787
- /* @__PURE__ */ 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" }),
7788
- /* @__PURE__ */ jsx("path", { d: "m14.5 12.5 2-2" }),
7789
- /* @__PURE__ */ jsx("path", { d: "m11.5 9.5 2-2" }),
7790
- /* @__PURE__ */ jsx("path", { d: "m8.5 6.5 2-2" }),
7791
- /* @__PURE__ */ jsx("path", { d: "m17.5 15.5 2-2" })
7792
- ] }),
7793
- t("See full size chart")
7794
- ] })
7795
- ] })
7796
- ] }),
7797
- /* @__PURE__ */ jsxs("div", { className: "ps-bp-root", style: { justifyContent: "flex-start" }, children: [
7798
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-size-hero", children: [
7799
- /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-size-letter", children: displaySize }),
7800
- /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-size-meta", children: [
7801
- /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-size-label${isRecommended ? "" : " ps-not-rec"}`, children: isRecommended ? t("RECOMMENDED SIZE") : t("NOT RECOMMENDED") }),
7802
- /* @__PURE__ */ jsx("button", { className: "ps-tryon-sr-edit-link", onClick: () => {
7803
- setView("body-profile");
7804
- setEditVals({});
7805
- setSelectedSize(null);
7806
- }, children: t("Edit measurements") })
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
- (displayFitRows.length > 0 || sizeGuideRow) && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-tabs", children: [
7810
- /* @__PURE__ */ jsxs("button", { className: `ps-tryon-sr-tab${resultTab === "chart" ? " ps-active" : ""}`, onClick: () => setResultTab("chart"), children: [
7811
- t("Size guide"),
7812
- " ",
7813
- displaySize
7814
- ] }),
7815
- /* @__PURE__ */ jsx("button", { className: `ps-tryon-sr-tab${resultTab === "fit" ? " ps-active" : ""}`, onClick: () => setResultTab("fit"), children: t("Your fit") })
7816
- ] }),
7817
- resultTab === "fit" && displayFitRows.length > 0 && /* @__PURE__ */ jsxs("table", { className: "ps-tryon-sr-fit-table", children: [
7818
- /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
7819
- /* @__PURE__ */ jsx("th", {}),
7820
- /* @__PURE__ */ jsx("th", { children: t("You") }),
7821
- /* @__PURE__ */ jsx("th", { children: t("Garment") }),
7822
- /* @__PURE__ */ jsx("th", { children: t("Your fit") })
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
- handleClose();
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: () => setView(view === "profiles" ? "body-profile" : "profiles"), children: /* @__PURE__ */ jsx(UserIcon, {}) }),
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, {}) }),
@@ -16717,7 +16717,6 @@ function SizeResultView({
16717
16717
  }) {
16718
16718
  const unitLbl = sizingUnit === "cm" ? t2("cm") : t2("in");
16719
16719
  const [editVals, setEditVals] = reactExports.useState({});
16720
- const cleanNum = cleanNumFn;
16721
16720
  const pRange = pRangeFn;
16722
16721
  const cellVal = reactExports.useCallback((row, colIdx, header) => {
16723
16722
  return cellValFn(row, colIdx, header);
@@ -16826,8 +16825,7 @@ function SizeResultView({
16826
16825
  setGuidePreviewUrl(null);
16827
16826
  }, [guideFile]);
16828
16827
  const displaySize = selectedSize || origSize;
16829
- const isRecommended = displaySize === origSize;
16830
- const displayFitRows = reactExports.useMemo(() => {
16828
+ reactExports.useMemo(() => {
16831
16829
  if (!sizingResult?.matchDetails?.length) return [];
16832
16830
  const seen = /* @__PURE__ */ new Set();
16833
16831
  const unique = sizingResult.matchDetails.filter((m2) => {
@@ -16861,7 +16859,7 @@ function SizeResultView({
16861
16859
  return { area: m2.measurement, userNum: pNumFn(m2.userValue), chartLabel, fit };
16862
16860
  });
16863
16861
  }, [sizingResult, displaySize, origSize, chartRangeFor]);
16864
- const sizeGuideRow = reactExports.useMemo(() => {
16862
+ reactExports.useMemo(() => {
16865
16863
  if (!sizeGuide?.headers || !sizeGuide?.rows || sizeColIdx < 0) return null;
16866
16864
  const row = sizeGuide.rows.find((r2) => cellVal(r2, sizeColIdx, sizeHeader) === displaySize);
16867
16865
  if (!row) return null;
@@ -17192,172 +17190,71 @@ function SizeResultView({
17192
17190
  ] }, "panel-results")
17193
17191
  ] })
17194
17192
  ) : (
17195
- /* ── SINGLE-PIECE — same layout as body profile ── */
17196
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-layout", children: [
17197
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-image", style: { position: "relative" }, children: [
17198
- /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-bp-image-img", onLoad: handleImgLoad }),
17199
- 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 }),
17200
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-img-actions", children: [
17201
- resultImageUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-img-icon", onClick: handleDownload, children: [
17202
- /* @__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: [
17203
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
17204
- /* @__PURE__ */ jsxRuntimeExports.jsx("polyline", { points: "7 10 12 15 17 10" }),
17205
- /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
17206
- ] }),
17207
- t2("Download")
17208
- ] }),
17209
- sizeGuide?.found && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-tryon-sr-img-icon", onClick: () => setShowFullChart(true), children: [
17210
- /* @__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: [
17211
- /* @__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" }),
17212
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m14.5 12.5 2-2" }),
17213
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m11.5 9.5 2-2" }),
17214
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m8.5 6.5 2-2" }),
17215
- /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "m17.5 15.5 2-2" })
17216
- ] }),
17217
- t2("See full size chart")
17218
- ] })
17219
- ] })
17220
- ] }),
17221
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-root", style: { justifyContent: "flex-start" }, children: [
17222
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-size-hero", children: [
17223
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-size-letter", children: displaySize }),
17224
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-size-meta", children: [
17225
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `ps-tryon-sr-size-label${isRecommended ? "" : " ps-not-rec"}`, children: isRecommended ? t2("RECOMMENDED SIZE") : t2("NOT RECOMMENDED") }),
17226
- /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-edit-link", onClick: () => {
17227
- setView("body-profile");
17228
- setEditVals({});
17229
- setSelectedSize(null);
17230
- }, children: t2("Edit measurements") })
17193
+ /* ── SINGLE-PIECE — rendered via SectionDetailView for visual parity with multi-garment ── */
17194
+ (() => {
17195
+ const singleSection = sizeGuide?.found ? { headers: sizeGuide.headers || [], rows: sizeGuide.rows || [], requiredFields: sizeGuide.requiredFields || [] } : { headers: [], rows: [], requiredFields: [] };
17196
+ const singleResult = { recommendedSize: sizingResult?.recommendedSize || "", matchDetails: sizingResult?.matchDetails || [] };
17197
+ const singleUserMeasurements = {};
17198
+ if (sizingResult?.matchDetails) {
17199
+ for (const m2 of sizingResult.matchDetails) singleUserMeasurements[m2.measurement.toLowerCase()] = pNumFn(m2.userValue);
17200
+ }
17201
+ const sectionName = productTitle || t2("Size");
17202
+ if (isMobile) {
17203
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(
17204
+ SectionDetailView,
17205
+ {
17206
+ sectionName,
17207
+ section: singleSection,
17208
+ sectionResult: singleResult,
17209
+ userMeasurements: singleUserMeasurements,
17210
+ unitLbl,
17211
+ lengthEntry: null,
17212
+ onBack: () => setView("body-profile"),
17213
+ productImage: resultImageUrl || productImage,
17214
+ productTitle,
17215
+ isMobile: true,
17216
+ isTryOnImage: !!resultImageUrl,
17217
+ showLines,
17218
+ onToggleLines: () => setShowLines(!showLines),
17219
+ onImageLoad: handleImgLoad,
17220
+ overlayNode: resultImageUrl && poseReady && poseLines ? /* @__PURE__ */ jsxRuntimeExports.jsx(
17221
+ MeasurementOverlay,
17222
+ {
17223
+ lines: poseLines,
17224
+ fitRows: (sizingResult?.matchDetails || []).map((m2) => ({ area: m2.measurement, userNum: parseFloat(m2.userValue) || 0, chartLabel: m2.chartRange || "", fit: m2.fit })),
17225
+ show: showLines,
17226
+ imgWidth: imgDims.w,
17227
+ imgHeight: imgDims.h
17228
+ }
17229
+ ) : null,
17230
+ t: t2
17231
+ }
17232
+ );
17233
+ }
17234
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2", children: [
17235
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-v2-bg", style: { position: "relative" }, children: [
17236
+ /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: resultImageUrl || productImage, alt: productTitle, className: "ps-tryon-v2-bg-img", onLoad: handleImgLoad }),
17237
+ 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 }),
17238
+ 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: [
17239
+ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: () => setShowLines(!showLines), children: showLines ? t2("Hide Fit") : t2("Show Fit") }),
17240
+ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-sr-glass-btn", onClick: handleDownload, children: t2("Download") })
17231
17241
  ] })
17232
17242
  ] }),
17233
- (displayFitRows.length > 0 || sizeGuideRow) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-tabs", children: [
17234
- /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: `ps-tryon-sr-tab${resultTab === "chart" ? " ps-active" : ""}`, onClick: () => setResultTab("chart"), children: [
17235
- t2("Size guide"),
17236
- " ",
17237
- displaySize
17238
- ] }),
17239
- /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: `ps-tryon-sr-tab${resultTab === "fit" ? " ps-active" : ""}`, onClick: () => setResultTab("fit"), children: t2("Your fit") })
17240
- ] }),
17241
- resultTab === "fit" && displayFitRows.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("table", { className: "ps-tryon-sr-fit-table", children: [
17242
- /* @__PURE__ */ jsxRuntimeExports.jsx("thead", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
17243
- /* @__PURE__ */ jsxRuntimeExports.jsx("th", {}),
17244
- /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: t2("You") }),
17245
- /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: t2("Garment") }),
17246
- /* @__PURE__ */ jsxRuntimeExports.jsx("th", { children: t2("Your fit") })
17247
- ] }) }),
17248
- /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: displayFitRows.map((row, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
17249
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "ps-tryon-sr-ft-area", children: row.area }),
17250
- /* @__PURE__ */ jsxRuntimeExports.jsxs("td", { className: "ps-tryon-sr-ft-you", children: [
17251
- row.userNum,
17252
- " ",
17253
- unitLbl
17254
- ] }),
17255
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "ps-tryon-sr-ft-garment", children: row.chartLabel }),
17256
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `ps-tryon-sr-fit-status ps-fit-${row.fit}`, children: fitLabelFn(row.fit, t2) }) })
17257
- ] }, i)) })
17258
- ] }),
17259
- resultTab === "chart" && sizeGuideRow && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-fit-list", children: sizeGuideRow.map((entry, i) => {
17260
- const raw = cleanNum(entry.value);
17261
- const isCmVal = /cm/i.test(entry.value) || /cm/i.test(entry.header);
17262
- const needConvert = isCmVal && sizingUnit === "in";
17263
- const nums = raw.split("–").map(Number).filter((n2) => !isNaN(n2));
17264
- const display = needConvert && nums.length > 0 ? nums.map((n2) => +(n2 / 2.54).toFixed(1)).join("–") : raw;
17265
- const isWeight = /weight|kg/i.test(entry.header);
17266
- const wUnit = isWeight ? /kg/i.test(entry.value) ? "kg" : "lbs" : unitLbl;
17267
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-fit-item", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-fit-head", children: [
17268
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-fit-area", children: entry.header }),
17269
- /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "ps-tryon-sr-fit-range", children: [
17270
- isWeight ? raw : display,
17271
- " ",
17272
- isWeight ? wUnit : unitLbl
17273
- ] })
17274
- ] }) }, i);
17275
- }) }),
17276
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-tryon-sr-chips", children: [
17277
- sizingResult.tightSize && sizingResult.tightSize !== origSize && sizingResult.tightSize !== sizingResult.looseSize && /* @__PURE__ */ jsxRuntimeExports.jsxs(
17278
- "button",
17279
- {
17280
- className: `ps-tryon-sr-chip${displaySize === sizingResult.tightSize ? " ps-active" : ""}`,
17281
- onClick: () => setSelectedSize(sizingResult.tightSize),
17282
- children: [
17283
- sizingResult.tightSize,
17284
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-chip-hint", children: t2("tighter") })
17285
- ]
17286
- }
17287
- ),
17288
- /* @__PURE__ */ jsxRuntimeExports.jsxs(
17289
- "button",
17290
- {
17291
- className: `ps-tryon-sr-chip ps-recommended${displaySize === origSize ? " ps-active" : ""}`,
17292
- onClick: () => setSelectedSize(null),
17293
- children: [
17294
- origSize,
17295
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-rec-dot" })
17296
- ]
17297
- }
17298
- ),
17299
- sizingResult.looseSize && sizingResult.looseSize !== origSize && /* @__PURE__ */ jsxRuntimeExports.jsxs(
17300
- "button",
17301
- {
17302
- className: `ps-tryon-sr-chip${displaySize === sizingResult.looseSize ? " ps-active" : ""}`,
17303
- onClick: () => setSelectedSize(sizingResult.looseSize),
17304
- children: [
17305
- sizingResult.looseSize,
17306
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-tryon-sr-chip-hint", children: t2("looser") })
17307
- ]
17308
- }
17309
- )
17310
- ] }),
17311
- displayFitRows.length === 0 && !sizeGuideRow && sizingResult.reasoning && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: sizingResult.reasoning }) }),
17312
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ps-bp-nav", children: [
17313
- /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-back-btn", onClick: () => setView("body-profile"), type: "button", children: [
17314
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ps-bp-back-arrow", children: "←" }),
17315
- " ",
17316
- t2("Back")
17317
- ] }),
17318
- !resultImageUrl && !tryOnProcessing && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-next-btn", onClick: () => {
17319
- setGuideFile(null);
17320
- setShowPhotoGuide(true);
17321
- }, children: [
17322
- /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, { size: 14 }),
17323
- " ",
17324
- t2("Try It On")
17325
- ] }),
17326
- tryOnProcessing && !resultImageUrl && /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: "ps-bp-next-btn", disabled: true, children: [
17327
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "0.9vw", height: "0.9vw", borderWidth: "1.5px", display: "inline-block" } }),
17328
- " ",
17329
- t2("Processing...")
17330
- ] }),
17331
- resultImageUrl && /* @__PURE__ */ jsxRuntimeExports.jsx(
17332
- "button",
17333
- {
17334
- className: "ps-bp-next-btn",
17335
- disabled: retryLoading,
17336
- onClick: () => {
17337
- const fitInfo = (sizingResult?.matchDetails || []).map((m2) => ({
17338
- area: m2.measurement,
17339
- fit: m2.fit,
17340
- userValue: parseFloat(m2.userValue) || void 0,
17341
- garmentRange: m2.chartRange || void 0
17342
- }));
17343
- onRetryWithFit(fitInfo);
17344
- },
17345
- children: retryLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
17346
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-size-loading-spinner", style: { width: "0.9vw", height: "0.9vw", borderWidth: "1.5px", display: "inline-block" } }),
17347
- " ",
17348
- t2("Generating...")
17349
- ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
17350
- /* @__PURE__ */ jsxRuntimeExports.jsx(CameraIcon$1, { size: 14 }),
17351
- " ",
17352
- t2("Try on size"),
17353
- " ",
17354
- displaySize
17355
- ] })
17356
- }
17357
- )
17358
- ] })
17359
- ] })
17360
- ] })
17243
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-v2-panel", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
17244
+ SectionDetailView,
17245
+ {
17246
+ sectionName,
17247
+ section: singleSection,
17248
+ sectionResult: singleResult,
17249
+ userMeasurements: singleUserMeasurements,
17250
+ unitLbl,
17251
+ lengthEntry: null,
17252
+ onBack: () => setView("body-profile"),
17253
+ t: t2
17254
+ }
17255
+ ) }, "panel-single")
17256
+ ] });
17257
+ })()
17361
17258
  ),
17362
17259
  showPhotoGuide && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ps-tryon-sr-chart-overlay", children: isMobile ? (
17363
17260
  /* ── Mobile: same layout as the AI-sizing photo step
@@ -20159,7 +20056,8 @@ function PrimeStyleTryonInner({
20159
20056
  setView("body-profile");
20160
20057
  break;
20161
20058
  case "profiles":
20162
- handleClose();
20059
+ setView(prevViewRef.current || "body-profile");
20060
+ prevViewRef.current = null;
20163
20061
  break;
20164
20062
  default:
20165
20063
  handleClose();
@@ -21155,12 +21053,25 @@ function PrimeStyleTryonInner({
21155
21053
  /* @__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: [
21156
21054
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cx("ps-tryon-header ps-tryon-header-minimal", cn.header), children: [
21157
21055
  /* @__PURE__ */ jsxRuntimeExports.jsx(LangSwitcher, { activeLocale, onSelect: setActiveLocale }),
21158
- /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("Profiles"), onClick: () => setView(view === "profiles" ? "body-profile" : "profiles"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(UserIcon, {}) }),
21056
+ /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("Profiles"), onClick: () => {
21057
+ if (drawer) setDrawer(null);
21058
+ if (view === "profiles") {
21059
+ setView(prevViewRef.current || "body-profile");
21060
+ prevViewRef.current = null;
21061
+ } else {
21062
+ prevViewRef.current = view;
21063
+ setView("profiles");
21064
+ }
21065
+ }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(UserIcon, {}) }),
21159
21066
  /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ps-tryon-header-icon", title: t2("History"), onClick: () => {
21067
+ if (view === "profiles") {
21068
+ setView(prevViewRef.current || "body-profile");
21069
+ prevViewRef.current = null;
21070
+ }
21160
21071
  if (drawer === "history") {
21161
21072
  setDrawer(null);
21162
21073
  } else {
21163
- prevViewRef.current = view;
21074
+ prevViewRef.current = prevViewRef.current || view;
21164
21075
  setDrawer("history");
21165
21076
  }
21166
21077
  }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClockIcon, {}) }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primestyleai/tryon",
3
- "version": "5.8.5",
3
+ "version": "5.8.6",
4
4
  "description": "PrimeStyle Virtual Try-On SDK — React component & Web Component",
5
5
  "type": "module",
6
6
  "main": "dist/primestyle-tryon.js",