@primestyleai/tryon 3.17.0 → 3.18.0

package/dist/{index-DvAzTRFF.js → index-Lf4qO_jW.js}

@@ -305,6 +305,9 @@ const en = {
   "Size Chart": "Size Chart",
   "tap to compare": "tap to compare",
   "Comparing size": "Comparing size",
+  "Compare with another size": "Compare with another size",
+  "recommended": "recommended",
+  "size": "size",
   "Fit Analysis": "Fit Analysis",
   "Show more": "Show more",
   "Done": "Done",

package/dist/primestyle-tryon.js

@@ -1,5 +1,5 @@
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-DvAzTRFF.js";
-import { P, b, T, d, r } from "./index-DvAzTRFF.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-Lf4qO_jW.js";
+import { P, b, T, d, r } from "./index-Lf4qO_jW.js";
 function detectProductImage() {
   const ogImage = document.querySelector(
     'meta[property="og:image"]'

package/dist/react/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-DvAzTRFF.js";
+import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-Lf4qO_jW.js";
 const HEADER_ALIASES = {
   // ── Size label columns (skipped during field derivation) ──
   size: "__size__",
@@ -1582,108 +1582,65 @@ function PrimeStyleTryonInner({
     ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
   function SizeResultView() {
-    const [activeSize, setActiveSize] = useState(sizingResult?.recommendedSize || "");
-    const [editedValues, setEditedValues] = useState({});
-    const isCmResult = sizingUnit === "cm";
-    const chartData = useMemo(() => {
+    const isCmR = sizingUnit === "cm";
+    const unitLbl = isCmR ? t("cm") : t("in");
+    const allSizes = useMemo(() => {
+      if (!sizeGuide?.found || !sizeGuide.headers || !sizeGuide.rows) return [];
+      const idx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
+      const col = idx >= 0 ? idx : 0;
+      return sizeGuide.rows.map((r) => r[col]?.trim()).filter(Boolean);
+    }, [sizeGuide]);
+    const [compareSize, setCompareSize] = useState("");
+    const [editVals, setEditVals] = useState({});
+    const parseNumFromDetail = (s) => {
+      const n = parseFloat(s.replace(/[^\d.]/g, ""));
+      return isNaN(n) ? 0 : n;
+    };
+    const parseRangeFromDetail = (s) => {
+      const nums = s.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
+      if (nums.length === 0) return { min: 0, max: 0 };
+      return { min: Math.min(...nums), max: Math.max(...nums) };
+    };
+    const getChartRangeForSize = useCallback((measurement, size) => {
       if (!sizeGuide?.found || !sizeGuide.headers || !sizeGuide.rows) return null;
-      const INTL = /* @__PURE__ */ new Set(["eu", "us", "uk", "it", "fr", "de", "jp", "cn", "kr", "au", "br", "eur"]);
-      const MEAS_MAP = {
-        chest: "chest",
-        bust: "bust",
-        waist: "waist",
-        hips: "hips",
-        hip: "hips",
-        shoulder: "shoulderWidth",
-        shoulders: "shoulderWidth",
-        "shoulder width": "shoulderWidth",
-        sleeve: "sleeveLength",
-        "sleeve length": "sleeveLength",
-        inseam: "inseam",
-        neck: "neckCircumference",
-        "neck circumference": "neckCircumference",
-        foot: "footLengthCm",
-        "foot length": "footLengthCm"
-      };
-      let idx = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
-      if (idx < 0) idx = sizeGuide.headers.findIndex((h) => /size|taglia|größe|taille/i.test(h.trim()));
-      if (idx < 0) {
-        const firstColVals = sizeGuide.rows.map((r) => r[0]?.trim() || "");
-        const looksLikeSize = firstColVals.some((v) => /^(XXS|XS|S|M|L|XL|XXL|XXXL|\d{1,3})$/i.test(v));
-        idx = looksLikeSize ? 0 : -1;
-      }
-      if (idx < 0) idx = 0;
-      const measCols = [];
-      const intlCols = [];
-      sizeGuide.headers.forEach((h, i) => {
-        if (i === idx) return;
-        const lower = h.toLowerCase().trim().replace(/\s*\(.*\)/, "");
-        const clean = lower.replace(/\s*size\s*/gi, "").trim();
-        if (INTL.has(clean)) {
-          intlCols.push({ headerIdx: i, code: clean.toUpperCase() });
-        } else if (MEAS_MAP[clean]) {
-          measCols.push({ headerIdx: i, label: h.trim(), formKey: MEAS_MAP[clean] });
-        } else if (clean && clean !== "size") {
-          const partialKey = Object.keys(MEAS_MAP).find((k) => clean.includes(k));
-          const fk = partialKey ? MEAS_MAP[partialKey] : clean.replace(/\s+/g, "");
-          measCols.push({ headerIdx: i, label: h.trim(), formKey: fk });
-        }
+      const sizeCol = sizeGuide.headers.findIndex((h) => /^size$/i.test(h.trim()));
+      const sc = sizeCol >= 0 ? sizeCol : 0;
+      const measCol = sizeGuide.headers.findIndex((h) => {
+        const a = h.toLowerCase().trim();
+        const b = measurement.toLowerCase().trim();
+        return a === b || a.includes(b) || b.includes(a);
       });
-      const sizes = sizeGuide.rows.map((row) => {
-        const label = row[idx] || "";
-        const measurements = {};
-        for (const col of measCols) {
-          const cell = row[col.headerIdx] || "";
-          const nums = cell.replace(/[^\d.\-–]/g, " ").trim().split(/[\s\-–]+/).filter(Boolean).map(Number).filter((n) => !isNaN(n));
-          if (nums.length > 0) {
-            measurements[col.formKey] = { raw: cell, min: Math.min(...nums), max: Math.max(...nums) };
+      if (measCol < 0) return null;
+      const row = sizeGuide.rows.find((r) => r[sc]?.trim() === size);
+      if (!row || !row[measCol]) return null;
+      const cell = row[measCol];
+      const parsed = parseRangeFromDetail(cell);
+      return { range: cell, ...parsed };
+    }, [sizeGuide]);
+    const fitRows = useMemo(() => {
+      const base = sizingResult?.matchDetails;
+      if (!base || base.length === 0) return [];
+      compareSize || sizingResult?.recommendedSize || "";
+      return base.map((m) => {
+        const editedRaw = editVals[m.measurement];
+        const origNum = parseNumFromDetail(m.userValue);
+        const userNum = editedRaw !== void 0 && editedRaw !== "" ? parseFloat(editedRaw) : origNum;
+        let chartRange = m.chartRange;
+        let rangeMin = parseRangeFromDetail(m.chartRange).min;
+        let rangeMax = parseRangeFromDetail(m.chartRange).max;
+        if (compareSize && compareSize !== sizingResult?.recommendedSize) {
+          const alt = getChartRangeForSize(m.measurement, compareSize);
+          if (alt) {
+            chartRange = alt.range;
+            rangeMin = alt.min;
+            rangeMax = alt.max;
           }
         }
-        const intl = {};
-        for (const col of intlCols) {
-          if (row[col.headerIdx]) intl[col.code] = row[col.headerIdx];
-        }
-        return { label, measurements, intl };
+        const fit = userNum >= rangeMin && userNum <= rangeMax ? "good" : userNum < rangeMin ? "tight" : "loose";
+        return { measurement: m.measurement, userNum, userDisplay: `${userNum}`, chartRange, fit };
       });
-      return { sizes: sizes.filter((s) => s.label.trim()), measCols, intlCols };
-    }, [sizeGuide]);
-    const getUserVal = useCallback((formKey2) => {
-      const edited = editedValues[formKey2];
-      if (edited !== void 0 && edited !== "") {
-        const v2 = parseFloat(edited);
-        return isNaN(v2) ? null : isCmResult ? v2 : inToCm(v2);
-      }
-      const raw = formRef.current[formKey2];
-      if (!raw) return null;
-      const v = parseFloat(raw);
-      return isNaN(v) ? null : isCmResult ? v : inToCm(v);
-    }, [editedValues, isCmResult]);
-    const activeFit = useMemo(() => {
-      if (!chartData) return null;
-      const sizeRow = chartData.sizes.find((s) => s.label === activeSize);
-      if (!sizeRow) return null;
-      const details = [];
-      for (const col of chartData.measCols) {
-        const range = sizeRow.measurements[col.formKey];
-        if (!range) continue;
-        const userVal = getUserVal(col.formKey);
-        if (userVal === null) continue;
-        const fit = userVal >= range.min && userVal <= range.max ? "good" : userVal < range.min ? "tight" : "loose";
-        details.push({ label: col.label, formKey: col.formKey, userVal, chartMin: range.min, chartMax: range.max, chartRaw: range.raw, fit });
-      }
-      return details;
-    }, [chartData, activeSize, getUserVal]);
-    const activeIntl = useMemo(() => {
-      if (!chartData) return sizingResult?.internationalSizes || {};
-      const sizeRow = chartData.sizes.find((s) => s.label === activeSize);
-      return sizeRow?.intl || sizingResult?.internationalSizes || {};
-    }, [chartData, activeSize, sizingResult]);
-    const fmtRange = (min, max) => {
-      if (isCmResult) return min === max ? `${Math.round(min)}` : `${Math.round(min)}–${Math.round(max)}`;
-      return min === max ? `${cmToIn(min)}` : `${cmToIn(min)}–${cmToIn(max)}`;
-    };
-    const unitLabel = isCmResult ? t("cm") : t("in");
-    const isRecommended = activeSize === sizingResult?.recommendedSize;
+    }, [sizingResult, compareSize, editVals, getChartRangeForSize]);
+    const intlSizes = sizingResult?.internationalSizes || {};
     return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr", children: [
       sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-loading", children: [
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
@@ -1697,123 +1654,65 @@ function PrimeStyleTryonInner({
             /* @__PURE__ */ jsx("div", { className: `ps-tryon-sr-hero-conf ps-conf-${sizingResult.confidence}`, children: sizingResult.confidence === "high" ? t("High Confidence") : sizingResult.confidence === "medium" ? t("Medium Confidence") : t("Low Confidence") })
           ] })
         ] }),
-        Object.keys(activeIntl).length > 0 && (() => {
-          const PRIMARY_CODES = ["US", "UK", "EU", "IT", "FR", "DE"];
-          const primary = PRIMARY_CODES.filter((c) => activeIntl[c]).map((c) => ({ code: c, val: activeIntl[c] }));
-          const rest = Object.entries(activeIntl).filter(([c]) => !PRIMARY_CODES.includes(c)).map(([code, val]) => ({ code, val }));
-          return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Equivalent Sizes") }),
-            primary.length > 0 && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-primary", children: primary.map((s) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-val", children: s.val }),
-              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-code", children: s.code })
-            ] }, s.code)) }),
-            rest.length > 0 && /* @__PURE__ */ jsxs("details", { className: "ps-tryon-sr-intl-more", children: [
-              /* @__PURE__ */ jsxs("summary", { className: "ps-tryon-sr-intl-more-btn", children: [
-                t("Show more"),
-                " (",
-                rest.length,
-                ")"
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-grid", children: rest.map((s) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-item", children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-code", children: s.code }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-val", children: s.val })
-              ] }, s.code)) })
-            ] })
-          ] });
-        })(),
-        chartData && chartData.sizes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-sizes", children: [
+        Object.keys(intlSizes).length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Equivalent Sizes") }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-intl-primary", children: Object.entries(intlSizes).map(([code, val]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-intl-card", children: [
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-val", children: val }),
+            /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-intl-card-code", children: code })
+          ] }, code)) })
+        ] }),
+        allSizes.length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-compare", children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Compare with another size") }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: "ps-tryon-sr-compare-select",
+              value: compareSize || sizingResult.recommendedSize,
+              onChange: (e) => setCompareSize(e.target.value),
+              children: allSizes.map((s) => /* @__PURE__ */ jsxs("option", { value: s, children: [
+                s,
+                s === sizingResult.recommendedSize ? ` — ${t("recommended")}` : ""
+              ] }, s))
+            }
+          )
+        ] }),
+        fitRows.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-label", children: [
-            t("Size Chart"),
-            " ",
-            /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-label-hint", children: [
-              "— ",
-              t("tap to compare")
+            t("Fit Analysis"),
+            compareSize && compareSize !== sizingResult.recommendedSize && /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-label-hint", children: [
+              " — ",
+              t("size"),
+              " ",
+              compareSize
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-size-row", children: chartData.sizes.map((s) => /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: () => setActiveSize(s.label),
-              className: `ps-tryon-sr-size-chip${s.label === activeSize ? " ps-active" : ""}${s.label === sizingResult.recommendedSize ? " ps-recommended" : ""}`,
-              children: [
-                s.label,
-                s.label === sizingResult.recommendedSize && /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-rec-dot" })
-              ]
-            },
-            s.label
-          )) }),
-          !isRecommended && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-comparing", children: [
-            t("Comparing size"),
-            " ",
-            /* @__PURE__ */ jsx("strong", { children: activeSize })
-          ] })
-        ] }),
-        (() => {
-          const hasDynamic = activeFit && activeFit.length > 0;
-          const hasBackend = sizingResult.matchDetails && sizingResult.matchDetails.length > 0;
-          if (hasDynamic) return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Fit Analysis") }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-table", children: [
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header", children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: t("Area") }),
-                /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-you", children: [
-                  t("You"),
-                  " (",
-                  unitLabel,
-                  ")"
-                ] }),
-                /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-chart", children: [
-                  t("Chart"),
-                  " (",
-                  unitLabel,
-                  ")"
-                ] }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
-              ] }),
-              activeFit.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-row ps-fit-${row.fit}`, children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: row.label }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-table", children: [
+            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: t("Area") }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: t("You") }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: t("Chart") }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
+            ] }),
+            fitRows.map((row, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-row ps-fit-${row.fit}`, children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: row.measurement }),
+              /* @__PURE__ */ jsxs("span", { className: "ps-tryon-sr-fit-col-you", children: [
+                /* @__PURE__ */ jsx(
                   "input",
                   {
                     type: "number",
                     className: "ps-tryon-sr-fit-input",
-                    defaultValue: isCmResult ? Math.round(row.userVal) : cmToIn(row.userVal),
-                    onBlur: (e) => setEditedValues((prev) => ({ ...prev, [row.formKey]: e.target.value }))
+                    value: editVals[row.measurement] !== void 0 ? editVals[row.measurement] : row.userNum,
+                    onChange: (e) => setEditVals((prev) => ({ ...prev, [row.measurement]: e.target.value }))
                   }
-                ) }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: fmtRange(row.chartMin, row.chartMax) }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsxs("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: [
-                  row.fit === "good" ? "✓" : row.fit === "tight" ? "↑" : "↓",
-                  " ",
-                  row.fit === "good" ? t("within range") : row.fit === "tight" ? t("may be snug") : t("may be loose")
-                ] }) })
-              ] }, i))
-            ] })
-          ] });
-          if (hasBackend) return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-label", children: t("Fit Analysis") }),
-            /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-table", children: [
-              /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-fit-header", children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: t("Area") }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: t("You") }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: t("Chart") }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: t("Fit") })
+                ),
+                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-unit", children: unitLbl })
               ] }),
-              sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("div", { className: `ps-tryon-sr-fit-row ps-fit-${m.fit}`, children: [
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-area", children: m.measurement }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-you", children: m.userValue }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: m.chartRange }),
-                /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsxs("span", { className: `ps-tryon-sr-fit-badge ps-fit-${m.fit}`, children: [
-                  m.fit === "good" ? "✓" : m.fit === "tight" ? "↑" : "↓",
-                  " ",
-                  m.fit === "good" ? t("within range") : m.fit === "tight" ? t("may be snug") : t("may be loose")
-                ] }) })
-              ] }, i))
-            ] })
-          ] });
-          if (sizingResult.reasoning) return /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) });
-          return null;
-        })(),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-chart", children: row.chartRange }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-sr-fit-col-fit", children: /* @__PURE__ */ jsx("span", { className: `ps-tryon-sr-fit-badge ps-fit-${row.fit}`, children: row.fit === "good" ? "✓ " + t("within range") : row.fit === "tight" ? "↑ " + t("may be snug") : "↓ " + t("may be loose") }) })
+            ] }, i))
+          ] })
+        ] }),
+        fitRows.length === 0 && sizingResult.reasoning && /* @__PURE__ */ jsx("div", { className: "ps-tryon-sr-reasoning", children: /* @__PURE__ */ jsx("p", { children: sizingResult.reasoning }) }),
         /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sr-ctas", children: [
           /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
             t("See how it looks on you"),
@@ -2596,6 +2495,19 @@ const STYLES = `
   .ps-tryon-sr-fit-input::-webkit-outer-spin-button,
   .ps-tryon-sr-fit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   .ps-tryon-sr-fit-input:focus { border-color: #bb945c; }
+  .ps-tryon-sr-fit-unit { font-size: 0.57vw; color: #666; margin-left: 0.2vw; }
+
+  /* Compare dropdown */
+  .ps-tryon-sr-compare { }
+  .ps-tryon-sr-compare-select {
+    width: 100%; padding: 0.52vw 2vw 0.52vw 0.73vw; border: 1.5px solid #333; border-radius: 0.52vw;
+    background: #1a1b1a; color: #fff; font-size: 0.83vw; font-weight: 600; font-family: inherit;
+    appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
+    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 0.73vw center;
+  }
+  .ps-tryon-sr-compare-select:focus { border-color: #bb945c; }
+  .ps-tryon-sr-compare-select option { background: #1a1b1a; color: #fff; }
 
   .ps-tryon-sr-fit-badge {
     display: inline-flex; align-items: center; gap: 0.26vw; padding: 0.21vw 0.52vw;

package/package.json

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