@primestyleai/tryon 3.7.0 → 3.8.0

package/dist/react/index.d.ts

@@ -27,7 +27,7 @@ export interface PrimeStyleTryonProps {
         message: string;
         code?: string;
     }) => void;
-    /** Size guide data from your backend — pass as-is, any format (HTML, JSON, object, string). Our AI will parse it. */
+    /** Size guide data — pass as-is, any format (JSON object, array, HTML). Structured formats are parsed instantly client-side; unrecognised formats fall back to AI. */
     sizeGuideData?: unknown;
 }
 export declare function PrimeStyleTryon(props: PrimeStyleTryonProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/react/index.js

@@ -2,6 +2,365 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { A as ApiClient, S as SseClient, i as isValidImageFile, c as compressImage, P as PrimeStyleError } from "../image-utils-C9bJ1zKO.js";
+const HEADER_ALIASES = {
+  // ── Size label columns (skipped during field derivation) ──
+  size: "__size__",
+  sizes: "__size__",
+  label: "__size__",
+  taglia: "__size__",
+  // IT
+  taille: "__size__",
+  // FR
+  größe: "__size__",
+  // DE
+  groesse: "__size__",
+  tamaño: "__size__",
+  // ES
+  サイズ: "__size__",
+  // JP
+  // ── Chest / Bust ──
+  chest: "chest",
+  "chest (cm)": "chest",
+  "chest(cm)": "chest",
+  "chest (in)": "chest",
+  bust: "bust",
+  "bust (cm)": "bust",
+  "bust(cm)": "bust",
+  "bust (in)": "bust",
+  "chest/bust": "chest",
+  "chest / bust": "chest",
+  petto: "chest",
+  // IT
+  poitrine: "bust",
+  // FR
+  brust: "chest",
+  // DE
+  // ── Waist ──
+  waist: "waist",
+  "waist (cm)": "waist",
+  "waist(cm)": "waist",
+  "waist (in)": "waist",
+  vita: "waist",
+  // IT
+  taille_mesure: "waist",
+  // FR (disambiguation from size label)
+  "tour de taille": "waist",
+  taille_cm: "waist",
+  // ── Hips ──
+  hips: "hips",
+  hip: "hips",
+  "hips (cm)": "hips",
+  "hip (cm)": "hips",
+  "hips(cm)": "hips",
+  "hips (in)": "hips",
+  fianchi: "hips",
+  // IT
+  hanches: "hips",
+  // FR
+  hüfte: "hips",
+  // DE
+  // ── Shoulder ──
+  shoulder: "shoulderWidth",
+  shoulders: "shoulderWidth",
+  "shoulder width": "shoulderWidth",
+  "shoulder (cm)": "shoulderWidth",
+  "shoulders (cm)": "shoulderWidth",
+  "shoulder width (cm)": "shoulderWidth",
+  spalle: "shoulderWidth",
+  // IT
+  épaules: "shoulderWidth",
+  // FR
+  schulter: "shoulderWidth",
+  // DE
+  // ── Sleeve ──
+  sleeve: "sleeveLength",
+  "sleeve length": "sleeveLength",
+  "sleeve (cm)": "sleeveLength",
+  "sleeve length (cm)": "sleeveLength",
+  manica: "sleeveLength",
+  // IT
+  manche: "sleeveLength",
+  // FR
+  ärmel: "sleeveLength",
+  // DE
+  // ── Inseam ──
+  inseam: "inseam",
+  "inseam (cm)": "inseam",
+  "inseam(cm)": "inseam",
+  "inseam (in)": "inseam",
+  "inside leg": "inseam",
+  "inside leg (cm)": "inseam",
+  cavallo: "inseam",
+  // IT
+  entrejambe: "inseam",
+  // FR
+  // ── Neck ──
+  neck: "neckCircumference",
+  collar: "neckCircumference",
+  "neck (cm)": "neckCircumference",
+  "collar (cm)": "neckCircumference",
+  collo: "neckCircumference",
+  // IT
+  col: "neckCircumference",
+  // FR
+  // ── Length (body/garment) ──
+  length: "length",
+  "body length": "length",
+  "length (cm)": "length",
+  "body length (cm)": "length",
+  lunghezza: "length",
+  // IT
+  longueur: "length",
+  // FR
+  // ── Thigh ──
+  thigh: "thighCircumference",
+  "thigh (cm)": "thighCircumference",
+  coscia: "thighCircumference",
+  // IT
+  // ── Foot / Shoe ──
+  "foot length": "footLengthCm",
+  "foot length (cm)": "footLengthCm",
+  "foot (cm)": "footLengthCm",
+  cm: "footLengthCm",
+  eu: "shoeEU",
+  "eu size": "shoeEU",
+  eur: "shoeEU",
+  us: "shoeUS",
+  "us size": "shoeUS",
+  uk: "shoeUK",
+  "uk size": "shoeUK"
+};
+const FIELD_LABELS = {
+  chest: "Chest",
+  bust: "Bust",
+  waist: "Waist",
+  hips: "Hips",
+  shoulderWidth: "Shoulders",
+  sleeveLength: "Sleeve Length",
+  inseam: "Inseam",
+  neckCircumference: "Neck",
+  length: "Length",
+  thighCircumference: "Thigh",
+  footLengthCm: "Foot Length",
+  shoeEU: "Shoe Size (EU)",
+  shoeUS: "Shoe Size (US)",
+  shoeUK: "Shoe Size (UK)"
+};
+const FIELD_PLACEHOLDERS = {
+  chest: "e.g. 104",
+  bust: "e.g. 88",
+  waist: "e.g. 84",
+  hips: "e.g. 96",
+  shoulderWidth: "e.g. 46",
+  sleeveLength: "e.g. 64",
+  inseam: "e.g. 81",
+  neckCircumference: "e.g. 40",
+  length: "e.g. 72",
+  thighCircumference: "e.g. 58",
+  footLengthCm: "e.g. 27",
+  shoeEU: "e.g. 42",
+  shoeUS: "e.g. 9",
+  shoeUK: "e.g. 8"
+};
+const SIZE_LABEL_PATTERN = /^(XXS|XS|S|M|L|XL|XXL|XXXL|2XL|3XL|4XL|5XL|\d{2,3}(\/\d{2,3})?(R|S|L)?|ONE\s*SIZE)$/i;
+const SHOE_FIELD_KEYS = /* @__PURE__ */ new Set(["shoeEU", "shoeUS", "shoeUK", "footLengthCm"]);
+function resolveHeaderKey(header) {
+  const cleaned = header.toLowerCase().trim().replace(/\(.*?\)/g, "").trim();
+  return HEADER_ALIASES[cleaned] ?? HEADER_ALIASES[header.toLowerCase().trim()] ?? null;
+}
+function deriveRequiredFields(headers) {
+  const fields = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const h of headers) {
+    const fieldKey = resolveHeaderKey(h);
+    if (!fieldKey || fieldKey === "__size__" || seen.has(fieldKey)) continue;
+    seen.add(fieldKey);
+    const isShoe = SHOE_FIELD_KEYS.has(fieldKey);
+    fields.push({
+      key: fieldKey,
+      label: FIELD_LABELS[fieldKey] || h,
+      required: true,
+      unit: isShoe && fieldKey !== "footLengthCm" ? "size" : "cm",
+      placeholder: FIELD_PLACEHOLDERS[fieldKey] || "",
+      category: isShoe ? "shoe" : "body"
+    });
+  }
+  fields.sort((a, b) => {
+    if (a.category !== b.category) return a.category === "body" ? -1 : 1;
+    return 0;
+  });
+  return fields;
+}
+function isObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+function isSizeLabel(key) {
+  return SIZE_LABEL_PATTERN.test(key.trim());
+}
+function allKeysAreSizeLabels(obj) {
+  const keys = Object.keys(obj);
+  if (keys.length === 0) return false;
+  return keys.every((k) => isSizeLabel(k));
+}
+function allKeysAreSectionNames(obj) {
+  const keys = Object.keys(obj);
+  if (keys.length < 2) return false;
+  return keys.every((k) => {
+    const val = obj[k];
+    const isContainer = Array.isArray(val) || isObject(val);
+    const isNotSizeLabel = !isSizeLabel(k);
+    const isNotMeasurement = !HEADER_ALIASES[k.toLowerCase().trim()];
+    return isContainer && isNotSizeLabel && isNotMeasurement;
+  });
+}
+function tryPreNormalized(input) {
+  if (!isObject(input)) return null;
+  const obj = input;
+  if (obj.found === true && Array.isArray(obj.headers) && Array.isArray(obj.rows) && obj.headers.length > 0 && obj.rows.length > 0) {
+    const headers = obj.headers;
+    const rows = obj.rows.map((r) => r.map(String));
+    return {
+      found: true,
+      title: typeof obj.title === "string" ? obj.title : void 0,
+      headers,
+      rows,
+      requiredFields: Array.isArray(obj.requiredFields) && obj.requiredFields.length > 0 ? obj.requiredFields : deriveRequiredFields(headers)
+    };
+  }
+  return null;
+}
+function tryKeyValueObject(input) {
+  if (!isObject(input)) return null;
+  const obj = input;
+  if (!allKeysAreSizeLabels(obj)) return null;
+  const sizeLabels = Object.keys(obj);
+  const firstVal = obj[sizeLabels[0]];
+  if (!isObject(firstVal)) return null;
+  const measureKeySet = /* @__PURE__ */ new Set();
+  for (const label of sizeLabels) {
+    const sizeObj = obj[label];
+    if (!isObject(sizeObj)) return null;
+    for (const k of Object.keys(sizeObj)) {
+      measureKeySet.add(k);
+    }
+  }
+  const measureKeys = Array.from(measureKeySet);
+  const headers = ["Size", ...measureKeys];
+  const rows = sizeLabels.map((label) => {
+    const sizeObj = obj[label];
+    return [label, ...measureKeys.map((k) => String(sizeObj[k] ?? ""))];
+  });
+  return { found: true, headers, rows, requiredFields: deriveRequiredFields(headers) };
+}
+function tryArrayOfObjects(input) {
+  if (!Array.isArray(input) || input.length === 0) return null;
+  if (!isObject(input[0])) return null;
+  const first = input[0];
+  const sizeKey = Object.keys(first).find((k) => {
+    const alias = HEADER_ALIASES[k.toLowerCase().trim()];
+    return alias === "__size__";
+  }) || Object.keys(first).find((k) => k.toLowerCase() === "size" || k.toLowerCase() === "label");
+  if (!sizeKey) return null;
+  const allKeys = /* @__PURE__ */ new Set();
+  for (const row of input) {
+    if (!isObject(row)) return null;
+    for (const k of Object.keys(row)) {
+      allKeys.add(k);
+    }
+  }
+  const measureKeys = Array.from(allKeys).filter((k) => k !== sizeKey);
+  const headers = [sizeKey, ...measureKeys];
+  const rows = input.map((row) => {
+    const obj = row;
+    return headers.map((h) => String(obj[h] ?? ""));
+  });
+  const displayHeaders = headers.map((h) => h.charAt(0).toUpperCase() + h.slice(1));
+  return { found: true, headers: displayHeaders, rows, requiredFields: deriveRequiredFields(displayHeaders) };
+}
+function tryArrayOfArrays(input) {
+  if (!Array.isArray(input) || input.length < 2) return null;
+  if (!Array.isArray(input[0])) return null;
+  const headers = input[0].map(String);
+  const rows = input.slice(1).map((r) => r.map(String));
+  if (headers.length < 2) return null;
+  return { found: true, headers, rows, requiredFields: deriveRequiredFields(headers) };
+}
+function tryWrapperObject(input) {
+  if (!isObject(input)) return null;
+  const obj = input;
+  const arrayKey = ["sizes", "data", "sizeChart", "size_chart", "sizeGuide", "size_guide", "chart"].find(
+    (k) => Array.isArray(obj[k])
+  );
+  if (!arrayKey) return null;
+  const inner = obj[arrayKey];
+  return tryArrayOfObjects(inner) ?? tryArrayOfArrays(inner);
+}
+function tryMultiSection(input) {
+  if (!isObject(input)) return null;
+  const obj = input;
+  if (!allKeysAreSectionNames(obj)) return null;
+  const sections = {};
+  let primaryHeaders = [];
+  let primaryRows = [];
+  const allFieldKeys = /* @__PURE__ */ new Set();
+  const allFields = [];
+  for (const [sectionName, sectionData] of Object.entries(obj)) {
+    const normalized = tryArrayOfObjects(sectionData) ?? tryArrayOfArrays(sectionData) ?? tryKeyValueObject(sectionData) ?? tryWrapperObject(sectionData);
+    if (!normalized) return null;
+    sections[sectionName] = {
+      headers: normalized.headers,
+      rows: normalized.rows,
+      requiredFields: normalized.requiredFields
+    };
+    if (primaryHeaders.length === 0) {
+      primaryHeaders = normalized.headers;
+      primaryRows = normalized.rows;
+    }
+    for (const f of normalized.requiredFields) {
+      if (!allFieldKeys.has(f.key)) {
+        allFieldKeys.add(f.key);
+        allFields.push(f);
+      }
+    }
+  }
+  if (Object.keys(sections).length === 0) return null;
+  return {
+    found: true,
+    headers: primaryHeaders,
+    rows: primaryRows,
+    requiredFields: allFields,
+    sections
+  };
+}
+function tryJsonString(input) {
+  if (typeof input !== "string") return null;
+  const trimmed = input.trim();
+  if (trimmed.startsWith("<") || trimmed.includes("<table") || trimmed.includes("<tr")) {
+    return null;
+  }
+  try {
+    const parsed = JSON.parse(trimmed);
+    return normalizeSizeGuide(parsed).success ? normalizeSizeGuide(parsed).data : null;
+  } catch {
+    return null;
+  }
+}
+function normalizeSizeGuide(input) {
+  if (input === null || input === void 0) {
+    return { success: false, reason: "no data provided" };
+  }
+  const result = tryPreNormalized(input) ?? tryMultiSection(input) ?? tryKeyValueObject(input) ?? tryArrayOfObjects(input) ?? tryArrayOfArrays(input) ?? tryWrapperObject(input) ?? tryJsonString(input);
+  if (result && result.requiredFields.length > 0) {
+    return { success: true, data: result };
+  }
+  if (result && result.requiredFields.length === 0 && result.rows.length > 0) {
+    return { success: true, data: result };
+  }
+  return {
+    success: false,
+    reason: typeof input === "string" ? "unstructured string" : "unrecognised format"
+  };
+}
 function cx(base, override) {
   return override ? `${base} ${override}` : base;
 }
@@ -51,8 +410,8 @@ const SIZING_COUNTRIES = [
   { code: "AU", label: "Australia" },
   { code: "BR", label: "Brazil" }
 ];
-const STEP_LABELS = ["", "Welcome", "Photo", "Size", "Generate", "Results"];
-const TOTAL_STEPS = 5;
+const STEP_LABELS = ["", "Welcome", "Size", "Your Fit", "Try On"];
+const TOTAL_STEPS = 4;
 function detectLocale() {
   if (typeof window === "undefined") return "US";
   const l = (navigator.language || "en-US").toLowerCase();
@@ -78,22 +437,6 @@ function lbsToKg(lbs) {
 function ftInToCm(ft, inch) {
   return +(ft * 30.48 + inch * 2.54).toFixed(1);
 }
-function SvgIcon({ d, size = 18, strokeWidth = 2 }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d })
-    }
-  );
-}
 function CameraIcon({ size = 18 }) {
   return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx("path", { d: "M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" }),
@@ -327,13 +670,25 @@ function PrimeStyleTryonInner({
   useEffect(() => {
     lsSet("history", history);
   }, [history]);
+  const normalizedGuide = useMemo(() => {
+    if (!sizeGuideData) return null;
+    return normalizeSizeGuide(sizeGuideData);
+  }, [sizeGuideData]);
   useEffect(() => {
-    if (view !== "sizing-choice" || sizeGuideFetchedRef.current || !apiRef.current) return;
+    if (view !== "sizing-choice" || sizeGuideFetchedRef.current) return;
     sizeGuideFetchedRef.current = true;
     if (!sizeGuideData) {
       setSizeGuide({ found: false });
       return;
     }
+    if (normalizedGuide?.success) {
+      setSizeGuide(normalizedGuide.data);
+      return;
+    }
+    if (!apiRef.current) {
+      setSizeGuide({ found: false });
+      return;
+    }
     setSizeGuideFetching(true);
     const baseUrl = getApiUrl(apiUrl);
     const key = getApiKey();
@@ -345,20 +700,20 @@ function PrimeStyleTryonInner({
       if (data) setSizeGuide(data);
       else setSizeGuide({ found: false });
     }).catch(() => setSizeGuide({ found: false })).finally(() => setSizeGuideFetching(false));
-  }, [view, apiUrl, productTitle, sizeGuideData]);
+  }, [view, apiUrl, productTitle, sizeGuideData, normalizedGuide]);
   const stepIndex = useMemo(() => {
     switch (view) {
       case "welcome":
         return 1;
-      case "upload":
-        return 2;
       case "sizing-choice":
       case "sizing-form":
+        return 2;
+      case "size-result":
         return 3;
+      case "upload":
       case "processing":
-        return 4;
       case "result":
-        return 5;
+        return 4;
       default:
         return 1;
     }
@@ -385,6 +740,7 @@ function PrimeStyleTryonInner({
     setFormGender("male");
     sizeGuideFetchedRef.current = false;
     setSizeGuideFetching(false);
+    historySavedRef.current = false;
     unsubRef.current?.();
     unsubRef.current = null;
     if (pollingRef.current) {
@@ -466,7 +822,10 @@ function PrimeStyleTryonInner({
       locale: sizingCountry,
       product: { title: productTitle, description: "", variants: [] }
     };
-    if (sizeGuide?.found) payload.sizeGuide = sizeGuide;
+    if (sizeGuide?.found) {
+      payload.sizeGuide = sizeGuide;
+      if (sizeGuide.sections) payload.sizeGuide = { ...sizeGuide, sections: sizeGuide.sections };
+    }
     payload.sizingUnit = sizingUnit;
     if (sizingMethod === "exact") {
       const m = { gender: formRef.current.gender || "male", sizingUnit };
@@ -514,7 +873,7 @@ function PrimeStyleTryonInner({
       setSizingLoading(false);
     }
   }, [apiUrl, sizingMethod, sizingCountry, heightUnit, weightUnit, sizingUnit, sizeGuide, productTitle, dynamicFields]);
-  const handleSubmit = useCallback(async () => {
+  const handleTryOnSubmit = useCallback(async () => {
     if (!selectedFile || !apiRef.current || !sseRef.current) {
       const msg = !apiRef.current ? "Missing NEXT_PUBLIC_PRIMESTYLE_API_KEY" : "No file selected";
       setErrorMessage(msg);
@@ -524,10 +883,6 @@ function PrimeStyleTryonInner({
     }
     completedRef.current = false;
     setView("processing");
-    if (sizingMethod) {
-      setSizingLoading(true);
-      submitSizing();
-    }
     try {
       const modelImage = await compressImage(selectedFile);
       const response = await apiRef.current.submitTryOn(modelImage, productImage);
@@ -561,7 +916,7 @@ function PrimeStyleTryonInner({
       setView("error");
       onError?.({ message, code });
     }
-  }, [selectedFile, productImage, onProcessing, onError, handleVtoUpdate, sizingMethod, submitSizing]);
+  }, [selectedFile, productImage, onProcessing, onError, handleVtoUpdate]);
   const handleDownload = useCallback(() => {
     if (!resultImageUrl) return;
     if (resultImageUrl.startsWith("data:")) {
@@ -592,7 +947,7 @@ function PrimeStyleTryonInner({
     setSizingResult(null);
     setSizingLoading(false);
     setProfileSaved(false);
-    setView("upload");
+    setView("sizing-choice");
   }, [previewUrl, cleanupJob]);
   const applyProfile = useCallback((id) => {
     const p = profiles.find((pr) => pr.id === id);
@@ -712,11 +1067,18 @@ function PrimeStyleTryonInner({
     }
     setHistory((prev) => [entry, ...prev].slice(0, 50));
   }, [productTitle, productImage, resultImageUrl, sizingResult, activeProfileId, profiles]);
+  const historySavedRef = useRef(false);
   useEffect(() => {
-    if (view === "result" && (resultImageUrl || sizingResult)) {
+    if (view === "size-result" && sizingResult && !historySavedRef.current) {
+      historySavedRef.current = true;
+      saveHistoryEntry();
+    } else if (view === "result" && resultImageUrl && !historySavedRef.current) {
+      historySavedRef.current = true;
       saveHistoryEntry();
+    } else if (view === "welcome" || view === "sizing-choice") {
+      historySavedRef.current = false;
     }
-  }, [view]);
+  }, [view, sizingResult, resultImageUrl]);
   const updateField = useCallback((key, val) => {
     formRef.current[key] = val;
   }, []);
@@ -800,20 +1162,19 @@ function PrimeStyleTryonInner({
           /* @__PURE__ */ jsx("img", { src: productImage, alt: "Product", className: "ps-tryon-welcome-product" }),
           /* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-sparkle", children: /* @__PURE__ */ jsx(SparkleIcon, { size: 20 }) })
         ] }),
-        /* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: "See How It Looks On You" }),
-        /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: "Virtual try-on + AI size recommendation" })
+        /* @__PURE__ */ jsx("h2", { className: "ps-tryon-welcome-title", children: "Find Your Perfect Size" }),
+        /* @__PURE__ */ jsx("p", { className: "ps-tryon-welcome-sub", children: "Get your size instantly, then try it on" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-features", children: [
-        { icon: /* @__PURE__ */ jsx(CameraIcon, {}), title: "Upload Photo", desc: "Share a photo of yourself" },
-        { icon: /* @__PURE__ */ jsx(RulerIcon, {}), title: "Find Your Size", desc: "AI-powered fit analysis" },
-        { icon: /* @__PURE__ */ jsx(SparkleIcon, {}), title: "See Results", desc: "Try-on in seconds" }
+        { icon: /* @__PURE__ */ jsx(RulerIcon, {}), title: "Get Your Size", desc: "Instant fit recommendation" },
+        { icon: /* @__PURE__ */ jsx(CameraIcon, {}), title: "Try It On", desc: "See how it looks on you" }
       ].map((f, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-feature", children: [
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-icon", children: f.icon }),
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-title", children: f.title }),
         /* @__PURE__ */ jsx("div", { className: "ps-tryon-feature-desc", children: f.desc })
       ] }, i)) }),
-      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
-        "Let’s Get Started ",
+      /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("sizing-choice"), children: [
+        "Find My Size ",
         /* @__PURE__ */ jsx(ArrowRightIcon, {})
       ] }),
       /* @__PURE__ */ jsx("div", { className: "ps-tryon-welcome-note", children: "Takes less than a minute" })
@@ -826,8 +1187,8 @@ function PrimeStyleTryonInner({
         /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
         /* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
       ] }),
-      /* @__PURE__ */ jsxs("button", { onClick: () => setView("sizing-choice"), className: cx("ps-tryon-submit", cn.submitButton), children: [
-        "Continue to Sizing ",
+      /* @__PURE__ */ jsxs("button", { onClick: handleTryOnSubmit, className: cx("ps-tryon-submit", cn.submitButton), children: [
+        "Try It On ",
         /* @__PURE__ */ jsx(ArrowRightIcon, {})
       ] })
     ] }) : /* @__PURE__ */ jsxs(
@@ -861,7 +1222,7 @@ function PrimeStyleTryonInner({
             }
           ),
           /* @__PURE__ */ jsx(UploadIcon, {}),
-          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Drop or upload your full body photo!" }),
+          /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-text", cn.uploadText), children: "Upload a full body photo" }),
           /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-upload-hint", cn.uploadHint), children: "JPEG, PNG or WebP (max 10MB)" })
         ]
       }
@@ -909,12 +1270,12 @@ function PrimeStyleTryonInner({
         ] }),
         /* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
           setSizingMethod(null);
-          handleSubmit();
+          setView("upload");
         }, children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(SvgIcon, { d: "M13 5H1M13 9H1M13 13H1M5 17l4 4 8-8", size: 24, strokeWidth: 1.5 }) }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-icon", children: /* @__PURE__ */ jsx(CameraIcon, { size: 24 }) }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-info", children: [
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Skip sizing" }),
-            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Just show me the try-on" })
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-title", children: "Skip, just try it on" }),
+            /* @__PURE__ */ jsx("div", { className: "ps-tryon-choice-desc", children: "Upload a photo to see how it looks" })
           ] })
         ] })
       ] })
@@ -1082,61 +1443,37 @@ function PrimeStyleTryonInner({
         if (saveToggle && saveFormName.trim()) {
           saveProfile(saveFormName.trim());
         }
-        handleSubmit();
+        setSizingLoading(true);
+        submitSizing();
+        setView("size-result");
       }, children: [
-        "Get My Size & Try On ",
+        "Get My Size ",
         /* @__PURE__ */ jsx(ArrowRightIcon, {})
       ] })
     ] }, `form-${formGender}-${sizingUnit}-${heightUnit}-${sizingCountry}-${formKey}`);
   }
-  function ProcessingView() {
-    const barCb = useCallback((el) => {
-      progressBarRef.current = el;
-      if (el) el.style.width = `${Math.round(progressRef.current)}%`;
-    }, []);
-    const pctCb = useCallback((el) => {
-      progressTextRef.current = el;
-      if (el) el.textContent = `${Math.round(progressRef.current)}%`;
-    }, []);
-    const statusCb = useCallback((el) => {
-      progressStatusRef.current = el;
-    }, []);
-    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
-        previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-processing-blur", style: { backgroundImage: `url(${previewUrl})` } }),
-          /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: "ps-tryon-processing-model" })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-line" }),
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
-        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
-        /* @__PURE__ */ jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
-      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
-    ] });
-  }
-  function ResultView() {
-    const hasSizing = !!sizingResult || sizingLoading;
-    const hasBoth = !!resultImageUrl && hasSizing;
-    const [profileName, setProfileName] = useState("");
+  function SizeResultView() {
     const [showFitDetails, setShowFitDetails] = useState(false);
     const confidenceLabel = sizingResult?.confidence === "high" ? "High Confidence" : sizingResult?.confidence === "medium" ? "Medium Confidence" : sizingResult?.confidence === "low" ? "Low Confidence" : "";
-    return /* @__PURE__ */ jsxs("div", { className: `ps-tryon-result-layout${hasBoth ? " ps-tryon-result-split" : ""}`, children: [
-      resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
-      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
-        sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend ps-tryon-sizing-loading", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
-          /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: "Analyzing your size..." })
-        ] }),
-        sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
-          /* @__PURE__ */ jsx("h3", { className: "ps-tryon-size-title", children: "Recommended Size" }),
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-result-view", children: [
+      sizingLoading && !sizingResult && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend ps-tryon-sizing-loading", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-loading-spinner" }),
+        /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: "Analyzing your size..." })
+      ] }),
+      sizingResult && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-recommend", children: [
+          /* @__PURE__ */ jsx("h3", { className: "ps-tryon-size-title", children: "Your Size" }),
           /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-hero-row", children: [
             /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize }),
             /* @__PURE__ */ jsx("span", { className: `ps-tryon-size-conf-label ps-conf-${sizingResult.confidence}`, children: confidenceLabel })
           ] }),
+          sizingResult.sections && Object.keys(sizingResult.sections).length > 1 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-multi-section", children: [
+            /* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: "Sizing by Garment" }),
+            Object.entries(sizingResult.sections).map(([name, sec]) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-section-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-section-name", children: name }),
+              /* @__PURE__ */ jsx("span", { className: "ps-tryon-size-badge ps-tryon-section-badge", children: sec.recommendedSize })
+            ] }, name))
+          ] }),
           sizingResult.matchDetails && sizingResult.matchDetails.length > 0 && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-summary", children: [
             /* @__PURE__ */ jsx("h4", { className: "ps-tryon-fit-summary-title", children: "Fit Summary" }),
             sizingResult.matchDetails.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "ps-tryon-fit-row", children: [
@@ -1147,7 +1484,7 @@ function PrimeStyleTryonInner({
                 m.fit === "good" ? "within range" : m.fit === "tight" ? "may be snug" : "may be loose"
               ] })
             ] }, i)),
-            /* @__PURE__ */ jsx("button", { className: "ps-tryon-fit-details-toggle", onClick: () => setShowFitDetails(!showFitDetails), children: showFitDetails ? "Hide detailed fit analysis ↑" : "See detailed fit analysis ↓" }),
+            /* @__PURE__ */ jsx("button", { className: "ps-tryon-fit-details-toggle", onClick: () => setShowFitDetails(!showFitDetails), children: showFitDetails ? "Hide details ↑" : "See details ↓" }),
             showFitDetails && /* @__PURE__ */ jsxs("table", { className: "ps-tryon-fit-table", children: [
               /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
                 /* @__PURE__ */ jsx("th", { children: "Area" }),
@@ -1172,35 +1509,56 @@ function PrimeStyleTryonInner({
           ] }),
           (!sizingResult.matchDetails || sizingResult.matchDetails.length === 0) && sizingResult.reasoning && /* @__PURE__ */ jsx("p", { className: "ps-tryon-size-reasoning", children: sizingResult.reasoning })
         ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ps-tryon-tryon-cta", children: [
+          /* @__PURE__ */ jsxs("button", { className: "ps-tryon-cta", onClick: () => setView("upload"), children: [
+            "See how it looks on you ",
+            /* @__PURE__ */ jsx(ArrowRightIcon, {})
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "ps-tryon-btn-secondary", onClick: handleClose, children: "Done" })
+        ] })
+      ] })
+    ] });
+  }
+  function ProcessingView() {
+    const barCb = useCallback((el) => {
+      progressBarRef.current = el;
+      if (el) el.style.width = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const pctCb = useCallback((el) => {
+      progressTextRef.current = el;
+      if (el) el.textContent = `${Math.round(progressRef.current)}%`;
+    }, []);
+    const statusCb = useCallback((el) => {
+      progressStatusRef.current = el;
+    }, []);
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-processing-image-wrap", children: [
+        previewUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-processing-blur", style: { backgroundImage: `url(${previewUrl})` } }),
+          /* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: "ps-tryon-processing-model" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-line" }),
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-scan-overlay" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-progress-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "ps-tryon-progress-bar-wrap", children: /* @__PURE__ */ jsx("div", { ref: barCb, className: "ps-tryon-progress-bar-fill" }) }),
+        /* @__PURE__ */ jsx("span", { ref: pctCb, className: "ps-tryon-progress-pct", children: "0%" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { ref: statusCb, className: cx("ps-tryon-processing-text", cn.processingText), children: "Preparing your image..." }),
+      /* @__PURE__ */ jsx("p", { className: cx("ps-tryon-processing-sub", cn.processingSubText), children: "This usually takes 15-25 seconds" })
+    ] });
+  }
+  function ResultView() {
+    return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-layout", children: [
+      resultImageUrl && /* @__PURE__ */ jsx("div", { className: "ps-tryon-result-image-col", children: /* @__PURE__ */ jsx("img", { src: resultImageUrl, alt: "Try-on result", className: cn.resultImage }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ps-tryon-result-info-col", children: [
+        sizingResult && /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-recommend ps-tryon-size-compact", children: /* @__PURE__ */ jsxs("div", { className: "ps-tryon-size-hero-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "ps-tryon-size-compact-label", children: "Your size:" }),
+          /* @__PURE__ */ jsx("div", { className: "ps-tryon-size-badge", children: sizingResult.recommendedSize })
+        ] }) }),
         /* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-result-actions", cn.resultActions), children: [
           /* @__PURE__ */ jsx("button", { onClick: handleDownload, className: cx("ps-tryon-btn-download", cn.downloadButton), children: "Download" }),
-          /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-btn-retry", cn.retryButton), children: "Try Another" })
-        ] }),
-        sizingMethod && !profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-prompt", children: [
-          /* @__PURE__ */ jsx("div", { className: "ps-tryon-save-label", children: "Save your measurements for next time" }),
-          /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-row", children: [
-            /* @__PURE__ */ jsx("input", { type: "text", placeholder: "Name this profile (e.g. John, Sarah)", value: profileName, onChange: (e) => setProfileName(e.target.value) }),
-            activeProfileId ? /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-btn-group", children: [
-              /* @__PURE__ */ jsxs("button", { onClick: () => {
-                if (profileName.trim()) saveProfile(profileName.trim());
-              }, children: [
-                "💾",
-                " Update"
-              ] }),
-              /* @__PURE__ */ jsx("button", { className: "ps-tryon-save-new-btn", onClick: () => {
-                if (profileName.trim()) saveProfile(profileName.trim(), true);
-              }, children: "+ New" })
-            ] }) : /* @__PURE__ */ jsxs("button", { onClick: () => {
-              if (profileName.trim()) saveProfile(profileName.trim());
-            }, children: [
-              "💾",
-              " Save"
-            ] })
-          ] })
-        ] }),
-        profileSaved && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-save-done", children: [
-          /* @__PURE__ */ jsx(CheckIcon, {}),
-          " Measurements saved to profile"
+          /* @__PURE__ */ jsx("button", { onClick: handleRetry, className: cx("ps-tryon-btn-retry", cn.retryButton), children: "Start Over" })
         ] })
       ] })
     ] });
@@ -1314,12 +1672,14 @@ function PrimeStyleTryonInner({
     switch (view) {
       case "welcome":
         return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(WelcomeView, {}) }, "v-welcome");
-      case "upload":
-        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(UploadView, {}) }, "v-upload");
       case "sizing-choice":
         return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(SizingChoiceView, {}) }, "v-choice");
       case "sizing-form":
         return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(SizingFormView, {}) }, "v-form");
+      case "size-result":
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(SizeResultView, {}) }, "v-sizeresult");
+      case "upload":
+        return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(UploadView, {}) }, "v-upload");
       case "processing":
         return /* @__PURE__ */ jsx("div", { className: "ps-tryon-view-enter", children: /* @__PURE__ */ jsx(ProcessingView, {}) }, "v-proc");
       case "result":
@@ -1753,8 +2113,27 @@ const STYLES = `
   .ps-tryon-equiv-region { padding: clamp(4px, 0.36vw, 7px) clamp(6px, 0.52vw, 10px); font-size: clamp(9px, 0.63vw, 12px); color: #999; font-weight: 600; background: rgba(255,255,255,0.03); }
   .ps-tryon-equiv-value { padding: clamp(4px, 0.36vw, 7px) clamp(7px, 0.63vw, 12px); font-size: clamp(10px, 0.73vw, 14px); color: #fff; font-weight: 700; }
 
+  /* Multi-section garment sizing (tuxedo/set) */
+  .ps-tryon-multi-section { margin-bottom: clamp(10px, 0.83vw, 16px); }
+  .ps-tryon-section-row { display: flex; align-items: center; justify-content: space-between; padding: clamp(6px, 0.52vw, 10px) 0; border-bottom: 1px solid #222; }
+  .ps-tryon-section-row:last-child { border-bottom: none; }
+  .ps-tryon-section-name { font-size: clamp(11px, 0.78vw, 15px); color: #ccc; font-weight: 500; }
+  .ps-tryon-section-badge { font-size: clamp(12px, 0.83vw, 16px); min-width: auto; padding: clamp(3px, 0.26vw, 5px) clamp(10px, 0.83vw, 16px); }
+
   .ps-tryon-size-reasoning { font-size: clamp(10px, 0.73vw, 14px); color: #ccc; line-height: 1.6; margin-bottom: clamp(8px, 0.73vw, 14px); }
 
+  /* Size Result View (standalone sizing result before try-on) */
+  .ps-tryon-size-result-view { display: flex; flex-direction: column; gap: clamp(12px, 1vw, 20px); }
+  .ps-tryon-tryon-cta { display: flex; flex-direction: column; gap: clamp(8px, 0.7vw, 12px); margin-top: clamp(8px, 0.7vw, 14px); }
+  .ps-tryon-btn-secondary {
+    background: transparent; border: 1.5px solid #444; color: #999; font-size: clamp(11px, 0.83vw, 15px);
+    font-weight: 600; padding: clamp(8px, 0.7vw, 12px) clamp(16px, 1.3vw, 24px); border-radius: clamp(6px, 0.52vw, 10px);
+    cursor: pointer; transition: all 0.2s;
+  }
+  .ps-tryon-btn-secondary:hover { border-color: #666; color: #ccc; }
+  .ps-tryon-size-compact { padding: clamp(6px, 0.5vw, 10px) 0; }
+  .ps-tryon-size-compact-label { font-size: clamp(11px, 0.78vw, 14px); color: #999; font-weight: 500; }
+
   /* Save profile prompt */
   .ps-tryon-save-prompt { margin-top: clamp(8px, 0.73vw, 14px); padding: clamp(8px, 0.73vw, 14px); border: 1px solid #333; border-radius: clamp(8px, 0.63vw, 12px); background: #1a1b1a; }
   .ps-tryon-save-label { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin-bottom: clamp(6px, 0.52vw, 10px); }

package/dist/sizing/constants.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Header alias mapping — maps common size guide column headers
+ * to standardised measurement field keys.
+ */
+export declare const HEADER_ALIASES: Record<string, string>;
+/** Human-readable labels for each measurement key */
+export declare const FIELD_LABELS: Record<string, string>;
+/** Placeholder values shown in form inputs */
+export declare const FIELD_PLACEHOLDERS: Record<string, string>;
+/** Regex to detect size label strings (S/M/L/XL or numeric 28-52) */
+export declare const SIZE_LABEL_PATTERN: RegExp;
+/** Keys that are shoe-related */
+export declare const SHOE_FIELD_KEYS: Set<string>;

package/dist/sizing/normalizer.d.ts

@@ -0,0 +1,35 @@
+export interface SizeGuideField {
+    key: string;
+    label: string;
+    required: boolean;
+    unit: "cm" | "size" | string;
+    placeholder?: string;
+    category: "body" | "shoe" | "other";
+}
+export interface NormalizedSection {
+    headers: string[];
+    rows: string[][];
+    requiredFields: SizeGuideField[];
+}
+export interface NormalizedSizeGuide {
+    found: true;
+    title?: string;
+    headers: string[];
+    rows: string[][];
+    requiredFields: SizeGuideField[];
+    sections?: Record<string, NormalizedSection>;
+}
+export type NormalizerResult = {
+    success: true;
+    data: NormalizedSizeGuide;
+} | {
+    success: false;
+    reason: string;
+};
+export declare function deriveRequiredFields(headers: string[]): SizeGuideField[];
+/**
+ * Attempts to normalise `sizeGuideData` (any format) into a structured
+ * `NormalizedSizeGuide`. Returns `{ success: false }` for unrecognised
+ * formats (HTML, images, free-form text) so the caller can fall back to AI.
+ */
+export declare function normalizeSizeGuide(input: unknown): NormalizerResult;

package/dist/types.d.ts

@@ -137,6 +137,53 @@ export interface SizeGuideData {
     headers: string[];
     rows: string[][];
 }
+/** A measurement field descriptor used by the sizing form */
+export interface SizeGuideField {
+    key: string;
+    label: string;
+    required: boolean;
+    unit: "cm" | "size" | string;
+    placeholder?: string;
+    category: "body" | "shoe" | "other";
+}
+/** A normalised section within a multi-garment size guide (e.g. tuxedo) */
+export interface NormalizedSection {
+    headers: string[];
+    rows: string[][];
+    requiredFields: SizeGuideField[];
+}
+/** Fully normalised size guide ready for deterministic comparison */
+export interface NormalizedSizeGuide {
+    found: true;
+    title?: string;
+    headers: string[];
+    rows: string[][];
+    requiredFields: SizeGuideField[];
+    sections?: Record<string, NormalizedSection>;
+}
+/** Match detail for a single measurement in a sizing recommendation */
+export interface MatchDetail {
+    measurement: string;
+    userValue: string;
+    chartRange: string;
+    fit: "good" | "tight" | "loose";
+}
+/** Per-section recommendation result (for multi-garment products) */
+export interface SectionRecommendation {
+    recommendedSize: string;
+    matchDetails: MatchDetail[];
+}
+/** Full sizing recommendation result */
+export interface SizingResult {
+    recommendedSize: string;
+    recommendedLength?: string | null;
+    confidence: "high" | "medium" | "low" | string;
+    reasoning: string;
+    internationalSizes?: Record<string, string>;
+    matchDetails?: MatchDetail[];
+    method?: "deterministic" | "ai";
+    sections?: Record<string, SectionRecommendation>;
+}
 /** Custom events emitted by the component */
 export interface PrimeStyleEvents {
     "ps:open": CustomEvent<void>;

package/package.json

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