@thefittingroom/shop-ui 5.0.11 → 5.0.17

package/dist/index.js

@@ -13896,6 +13896,265 @@ const createImpl = (createState) => {
   return useBoundStore;
 };
 const create = ((createState) => createState ? createImpl(createState) : createImpl);
+let debugSource = false;
+function _init$8(debug) {
+  if (debug) {
+    let escapeRegExp = function(string) {
+      return "^" + string.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*").replace(/\?/g, ".") + "$";
+    };
+    if (debug === true) {
+      debugSource = true;
+    } else if (debug instanceof RegExp) {
+      debugSource = debug;
+    } else if (Array.isArray(debug)) {
+      debugSource = new RegExp(debug.map((s) => escapeRegExp(s)).join("|"));
+    } else if (typeof debug === "string") {
+      debugSource = new RegExp(escapeRegExp(debug));
+    }
+  }
+}
+function isDebugSource(source) {
+  if (typeof debugSource === "boolean") {
+    return debugSource;
+  }
+  return debugSource.test(source);
+}
+function log(entry) {
+  const {
+    source,
+    level,
+    message,
+    data,
+    duration
+  } = entry;
+  if (level === "debug" && !isDebugSource(source)) {
+    return;
+  }
+  let finalMessage = message;
+  if (finalMessage.includes("{{")) {
+    finalMessage = finalMessage.replace(/{{ts}}/g, (/* @__PURE__ */ new Date()).toISOString());
+  }
+  finalMessage = `[TFR ${source}][${level.toUpperCase()}] ${finalMessage}`;
+  const logData = [finalMessage];
+  if (duration !== void 0) {
+    logData.push(`${duration.toFixed(2)} ms`);
+  }
+  if (data) {
+    logData.push(data);
+  }
+  switch (level) {
+    case "error":
+      console.error(...logData);
+      break;
+    case "warn":
+      console.warn(...logData);
+      break;
+    case "info":
+      console.info(...logData);
+      break;
+    case "debug":
+      console.debug(...logData);
+      break;
+    default:
+      console.log(...logData);
+  }
+}
+let Logger$2 = class Logger {
+  constructor(source) {
+    this.timers = {};
+    this.source = source;
+  }
+  logError(message, data = null) {
+    log({
+      source: this.source,
+      level: "error",
+      message,
+      data
+    });
+  }
+  logWarn(message, data = null) {
+    log({
+      source: this.source,
+      level: "warn",
+      message,
+      data
+    });
+  }
+  logInfo(message, data = null) {
+    log({
+      source: this.source,
+      level: "info",
+      message,
+      data
+    });
+  }
+  logDebug(message, data = null) {
+    log({
+      source: this.source,
+      level: "debug",
+      message,
+      data
+    });
+  }
+  logTimer(timerName, message, data = null) {
+    const duration = this.getTimerDuration(timerName);
+    log({
+      source: this.source,
+      level: "debug",
+      message,
+      data,
+      duration: duration ?? void 0
+    });
+  }
+  clearTimers() {
+    this.timers = {};
+  }
+  timerStart(name2) {
+    this.timers[name2] = [performance.now(), null];
+  }
+  timerEnd(name2) {
+    const timer = this.timers[name2];
+    if (timer && timer[1] === null) {
+      timer[1] = performance.now();
+    }
+  }
+  getTimers() {
+    const result = {};
+    for (const name2 in this.timers) {
+      result[name2] = this.getTimerDuration(name2);
+    }
+    return result;
+  }
+  getTimerDuration(name2) {
+    const timer = this.timers[name2];
+    if (timer && timer[1] !== null) {
+      return timer[1] - timer[0];
+    }
+    return null;
+  }
+  isDebugEnabled() {
+    return isDebugSource(this.source);
+  }
+};
+function getLogger(source) {
+  return new Logger$2(source);
+}
+function getSizeLabelFromSize(size) {
+  if (size.label) {
+    return size.label;
+  }
+  return size.size_value?.name ?? null;
+}
+function applyFrameBaseUrl(url, baseUrl2) {
+  const cleanBase = baseUrl2.replace(/\/+$/, "");
+  if (/^https?:\/\//i.test(url)) {
+    const parsed = new URL(url);
+    return `${cleanBase}${parsed.pathname}${parsed.search}${parsed.hash}`;
+  }
+  return `${cleanBase}${url.startsWith("/") ? "" : "/"}${url}`;
+}
+const STORAGE_KEY = "tfr:fitting-room:v1";
+const logger$c = getLogger("fitting-room");
+function readAll() {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) {
+      return {};
+    }
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      return {};
+    }
+    return parsed;
+  } catch (error) {
+    logger$c.logWarn("Failed to read fitting room from localStorage", {
+      error
+    });
+    return {};
+  }
+}
+function writeAll(all) {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
+  } catch (error) {
+    logger$c.logWarn("Failed to write fitting room to localStorage", {
+      error
+    });
+  }
+}
+function readFittingRoom(brandId) {
+  const all = readAll();
+  const items = all[String(brandId)];
+  return Array.isArray(items) ? items : [];
+}
+function writeFittingRoom(brandId, items) {
+  const all = readAll();
+  all[String(brandId)] = items;
+  writeAll(all);
+}
+function _init$7() {
+  const {
+    brandId
+  } = getStaticData();
+  const items = readFittingRoom(brandId);
+  useMainStore.setState({
+    fittingRoom: items
+  });
+}
+async function toggleFittingRoomItem(productId, isPdp) {
+  const state = useMainStore.getState();
+  const isInFittingRoom = state.fittingRoom.some((item) => item.externalId === productId);
+  if (isInFittingRoom) {
+    logger$c.logDebug("{{ts}} - Removing from fitting room", {
+      productId
+    });
+    state.removeFromFittingRoom(productId);
+    return;
+  }
+  logger$c.logDebug("{{ts}} - Adding to fitting room", {
+    productId,
+    isPdp
+  });
+  let size = null;
+  let color = null;
+  let colorwaySizeAssetId = null;
+  if (isPdp) {
+    const {
+      currentProduct
+    } = getStaticData();
+    if (currentProduct) {
+      try {
+        const selection = await currentProduct.getSelectedOptions();
+        size = selection.size || null;
+        color = selection.color;
+      } catch (error) {
+        logger$c.logWarn("Failed to read selected options from currentProduct", {
+          error
+        });
+      }
+      const stored = state.productData[productId];
+      if (stored && !("error" in stored) && size != null) {
+        const sizeRec = stored.sizeFitRecommendation.available_sizes.find((s) => getSizeLabelFromSize(s) === size);
+        if (sizeRec) {
+          const csa = sizeRec.colorway_size_assets.find((c) => {
+            const variant = currentProduct.variants.find((v) => v.sku === c.sku);
+            return variant?.color === color;
+          });
+          if (csa) {
+            colorwaySizeAssetId = csa.id;
+          }
+        }
+      }
+    }
+  }
+  state.addToFittingRoom({
+    externalId: productId,
+    size,
+    color,
+    colorwaySizeAssetId,
+    addedAt: Date.now()
+  });
+}
 const BROWSER_ALIASES_MAP = {
   AmazonBot: "amazonbot",
   "Amazon Silk": "amazon_silk",
@@ -16690,7 +16949,7 @@ const consoleLogger = {
     console?.[type]?.apply?.(console, args);
   }
 };
-let Logger$2 = class Logger {
+let Logger$1 = class Logger2 {
   constructor(concreteLogger, options = {}) {
     this.init(concreteLogger, options);
   }
@@ -16718,7 +16977,7 @@ let Logger$2 = class Logger {
     return this.logger[lvl](args);
   }
   create(moduleName) {
-    return new Logger(this.logger, {
+    return new Logger2(this.logger, {
       ...{
         prefix: `${this.prefix}:${moduleName}:`
       },
@@ -16728,10 +16987,10 @@ let Logger$2 = class Logger {
   clone(options) {
     options = options || this.options;
     options.prefix = options.prefix || this.prefix;
-    return new Logger(this.logger, options);
+    return new Logger2(this.logger, options);
   }
 };
-var baseLogger = new Logger$2();
+var baseLogger = new Logger$1();
 class EventEmitter {
   constructor() {
     this.observers = {};
@@ -19025,11 +19284,19 @@ const useTranslation = (ns, props = {}) => {
 const try_it_on$1 = "Try It On";
 const powered_by$1 = "Powered by";
 const loading$1 = "Loading...";
+const add_to_fitting_room$1 = "Add to Fitting Room";
+const added_to_fitting_room$1 = "In Fitting Room";
+const view_fitting_room$1 = "Fitting Room";
+const fitting_room$1 = { "title": "Fitting Room", "empty": "Your fitting room is empty.", "size_not_chosen": "Size not chosen — pick one before trying on.", "remove": "Remove" };
 const landing$1 = { "header": "Meet your mini me!", "description": "Loose on your waist but tight on your hips? We’ll show you.", "get_the_app": "Get the app", "already_have_account": "Already have an account?", "sign_in": "Sign in." };
 const en$1 = {
   try_it_on: try_it_on$1,
   powered_by: powered_by$1,
   loading: loading$1,
+  add_to_fitting_room: add_to_fitting_room$1,
+  added_to_fitting_room: added_to_fitting_room$1,
+  view_fitting_room: view_fitting_room$1,
+  fitting_room: fitting_room$1,
   landing: landing$1,
   "get-app": { "create_avatar": "Create your avatar" },
   "sign-in": { "email": "Email", "password": "Password", "forgot_password": "Forgot password?", "sign_in": "Sign in", "no_account": "Don’t have an account?", "download_app": "Download the app.", "invalid_email": "Please enter a valid email address.", "missing_password": "Please enter your password.", "login_failed": "Incorrect email or password." },
@@ -19041,11 +19308,19 @@ const en$1 = {
 const try_it_on = "Essayez-le";
 const powered_by = "Alimenté par";
 const loading = "Chargement...";
+const add_to_fitting_room = "Ajouter à la cabine d'essayage";
+const added_to_fitting_room = "Dans la cabine d'essayage";
+const view_fitting_room = "Cabine d'essayage";
+const fitting_room = { "title": "Cabine d'essayage", "empty": "Votre cabine d'essayage est vide.", "size_not_chosen": "Taille non choisie — choisissez-en une avant l'essayage.", "remove": "Supprimer" };
 const landing = { "header": "Rencontrez votre mini-moi !", "description": "Lâche à la taille mais serré aux hanches ? Nous allons vous montrer.", "get_the_app": "Obtenez l'application", "already_have_account": "Vous avez déjà un compte ?", "sign_in": "Connectez-vous." };
 const fr = {
   try_it_on,
   powered_by,
   loading,
+  add_to_fitting_room,
+  added_to_fitting_room,
+  view_fitting_room,
+  fitting_room,
   landing,
   "get-app": { "create_avatar": "Créez votre avatar" },
   "sign-in": { "email": "Email", "password": "Mot de passe", "forgot_password": "Mot de passe oublié ?", "sign_in": "Se connecter", "no_account": "Vous n'avez pas de compte ?", "download_app": "Téléchargez l'application.", "invalid_email": "Veuillez entrer une adresse e-mail valide.", "missing_password": "Veuillez entrer votre mot de passe.", "login_failed": "Email ou mot de passe incorrect." },
@@ -19189,57 +19464,6 @@ function ButtonT({
   const translatedText = translate(t, vars);
   return /* @__PURE__ */ jsx$1(Button, { ...props, children: translatedText });
 }
-const Link = reactExports.forwardRef(({
-  children,
-  variant,
-  css: css2,
-  ...props
-}, ref) => {
-  const variantCss = useVariantCss(variant, (theme) => ({
-    base: {
-      cursor: "pointer !important",
-      color: theme.color_fg_text,
-      fontFamily: theme.font_family,
-      fontSize: "14px",
-      textDecoration: "none"
-    },
-    brand: {
-      cursor: "pointer !important",
-      color: theme.color_fg_text,
-      fontFamily: theme.brand_font_family,
-      fontSize: "14px",
-      textDecoration: theme.brand_link_text_decoration
-    },
-    underline: {
-      cursor: "pointer !important",
-      color: theme.color_fg_text,
-      fontFamily: theme.font_family,
-      fontSize: "14px",
-      textDecoration: "underline"
-    },
-    semibold: {
-      cursor: "pointer !important",
-      color: theme.color_fg_text,
-      fontFamily: theme.font_family,
-      fontSize: "14px",
-      fontWeight: 600,
-      textDecoration: "none"
-    }
-  }));
-  return /* @__PURE__ */ jsx$1("a", { ref, css: [variantCss, css2, "", ""], ...props, children });
-});
-Link.displayName = "Link";
-function LinkT({
-  t,
-  vars,
-  ...props
-}) {
-  const {
-    t: translate
-  } = useTranslation();
-  const translatedText = translate(t, vars);
-  return /* @__PURE__ */ jsx$1(Link, { ...props, children: translatedText });
-}
 var lib = { exports: {} };
 var Modal = {};
 var propTypes = { exports: {} };
@@ -20742,6 +20966,7 @@ const SvgChevronLeft = (props) => /* @__PURE__ */ reactExports.createElement("sv
 const SvgChevronRight = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M18 36L30 24L18 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
 const SvgCloseIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 15, height: 16, viewBox: "0 0 15 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249026 1.13202C0.353455 1.02778 0.494976 0.969238 0.642526 0.969238C0.790076 0.969238 0.931598 1.02778 1.03603 1.13202L14.423 14.498C14.4747 14.5498 14.5157 14.6112 14.5436 14.6788C14.5716 14.7463 14.5859 14.8187 14.5859 14.8919C14.5858 14.965 14.5714 15.0374 14.5434 15.1049C14.5153 15.1725 14.4743 15.2338 14.4225 15.2855C14.3708 15.3372 14.3094 15.3782 14.2418 15.4061C14.1742 15.4341 14.1018 15.4484 14.0287 15.4484C13.9555 15.4483 13.8831 15.4339 13.8156 15.4058C13.7481 15.3778 13.6867 15.3368 13.635 15.285L0.250026 1.91802C0.198323 1.86646 0.157301 1.80521 0.129312 1.73777C0.101322 1.67034 0.0869141 1.59804 0.0869141 1.52502C0.0869141 1.45201 0.101322 1.37971 0.129312 1.31227C0.157301 1.24483 0.197323 1.18358 0.249026 1.13202Z", fill: "#21201F" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.249003 15.285C0.197149 15.2335 0.156 15.1722 0.127922 15.1046C0.0998429 15.0371 0.0853882 14.9647 0.0853882 14.8916C0.0853882 14.8184 0.0998429 14.746 0.127922 14.6785C0.156 14.6109 0.197149 14.5496 0.249003 14.498L13.635 1.13205C13.7407 1.03479 13.8798 0.982096 14.0234 0.984975C14.167 0.987855 14.3039 1.04608 14.4056 1.1475C14.5073 1.24893 14.5658 1.3857 14.5691 1.52928C14.5723 1.67286 14.52 1.81214 14.423 1.91805L1.036 15.285C0.931574 15.3893 0.790052 15.4478 0.642502 15.4478C0.494952 15.4478 0.353431 15.3893 0.249003 15.285Z", fill: "#21201F" }));
 const SvgDragHandle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 32, height: 4, viewBox: "0 0 32 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("rect", { width: 32, height: 4, rx: 2, fill: "black" }));
+const SvgFittingRoomIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 24, viewBox: "0 0 11 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.16963 1.44419C6.16963 1.16593 6.0591 0.89907 5.86234 0.702313C5.66558 0.505556 5.39872 0.39502 5.12047 0.39502C4.84221 0.39502 4.57535 0.505556 4.37859 0.702313C4.18184 0.89907 4.0713 1.16593 4.0713 1.44419C4.0713 2.31867 4.42277 3.01794 5.12047 3.54252H5.11627M5.11627 3.54252L9.29772 5.86537C9.46136 5.95625 9.59771 6.08925 9.69263 6.25058C9.78754 6.41191 9.83757 6.59569 9.83752 6.78287V7.2146C9.83752 7.49286 9.72698 7.75972 9.53023 7.95648C9.33347 8.15323 9.06661 8.26377 8.78835 8.26377H1.44419C1.16593 8.26377 0.89907 8.15323 0.702313 7.95648C0.505556 7.75972 0.39502 7.49286 0.39502 7.2146V6.78287C0.39497 6.59569 0.444998 6.41191 0.539913 6.25058C0.634829 6.08925 0.771177 5.95625 0.934816 5.86537L5.11627 3.54252Z", stroke: "currentColor", strokeWidth: 0.79, strokeLinecap: "round", strokeLinejoin: "round" }));
 const SvgInfoIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M6.75 9.15V6.75M6.75 4.35H6.756M12.75 6.75C12.75 10.0637 10.0637 12.75 6.75 12.75C3.43629 12.75 0.75 10.0637 0.75 6.75C0.75 3.43629 3.43629 0.75 6.75 0.75C10.0637 0.75 12.75 3.43629 12.75 6.75Z", stroke: "#757575", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
 const SvgLoadingCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 108, height: 108, viewBox: "0 0 108 108", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M27.1325 75.9593C25.3424 77.0549 23.0032 76.4919 21.9077 74.7018L20.2636 72.0155L18.786 69.0476L17.5726 65.9622L16.6328 62.7828L15.9737 59.5336L15.6002 56.2393L15.5153 52.925L15.7196 49.6159L16.2115 46.3373L16.9485 43.2752C17.4396 41.2348 19.4918 39.9788 21.5322 40.4699C23.5726 40.961 24.8286 43.0132 24.3375 45.0536L23.6782 47.793L23.2847 50.4154L23.1213 53.0621L23.1893 55.713L23.4879 58.3479L24.0151 60.9467L24.7668 63.4897L25.7373 65.9574L26.9191 68.3312L28.39 70.7345C29.4855 72.5246 28.9225 74.8638 27.1325 75.9593Z", fill: "black" }), /* @__PURE__ */ reactExports.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M32.542 81.0995C33.5444 79.2557 35.8518 78.5736 37.6955 79.5761L40.171 80.922L42.6022 81.9807L45.1164 82.8236L47.6945 83.4441L50.3169 83.8375L52.9636 84.0009L55.6145 83.933L58.2494 83.6343L60.8482 83.1071L63.3912 82.3554L65.8589 81.385L68.2327 80.2031L70.4945 78.8189L72.627 77.2428L74.6141 75.4868L76.4405 73.5643L78.0924 71.49L79.5573 69.2796L80.8239 66.9499L81.8827 64.5187L82.7255 62.0044L83.346 59.4264L83.7395 56.8039L83.9029 54.1572L83.8349 51.5064L83.5363 48.8715L83.0091 46.2727L82.2574 43.7297L81.2869 41.2619L80.1051 38.8882L78.7208 36.6263L77.1447 34.4938L75.3888 32.5068L73.4662 30.6803L71.392 29.0284L69.1815 27.5636L66.8518 26.297L64.4206 25.2382L61.9064 24.3954L59.3283 23.7749L56.7059 23.3814L54.0592 23.218L51.4083 23.2859L48.7734 23.5846L46.1747 24.1118L43.6316 24.8635L41.1639 25.834L38.7901 27.0158L36.5283 28.4001L34.3958 29.9762L32.4088 31.7321L30.4681 33.7749C29.0225 35.2964 26.6173 35.358 25.0958 33.9125C23.5743 32.467 23.5127 30.0618 24.9582 28.5403L27.1274 26.2569L29.6118 24.0615L32.278 22.0909L35.1058 20.3603L38.0737 18.8826L41.1591 17.6693L44.3385 16.7295L47.5877 16.0704L50.882 15.6969L54.1963 15.612L57.5054 15.8163L60.7841 16.3082L64.0074 17.084L67.1509 18.1378L70.1905 19.4615L73.1032 21.0451L75.8669 22.8766L78.4603 24.942L80.8639 27.2255L83.0594 29.7098L85.0299 32.376L86.7606 35.2039L88.2382 38.1718L89.4516 41.2571L90.3914 44.4365L91.0505 47.6857L91.424 50.98L91.5089 54.2943L91.3046 57.6034L90.8127 60.8821L90.0369 64.1055L88.9831 67.2489L87.6594 70.2886L86.0757 73.2013L84.2443 75.9649L82.1789 78.5584L79.8954 80.962L77.4111 83.1574L74.7448 85.128L71.917 86.8587L68.9491 88.3363L65.8637 89.5496L62.6843 90.4894L59.4351 91.1486L56.1408 91.522L52.8265 91.6069L49.5175 91.4026L46.2388 90.9107L43.0154 90.1349L39.872 89.0811L36.8323 87.7574L34.0653 86.253C32.2216 85.2506 31.5395 82.9432 32.542 81.0995Z", fill: "black", fillOpacity: 0.45 }));
 const SvgTfrIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 12, height: 24, viewBox: "0 0 12 24", fill: "#21201F", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M11.9082 4.0752V19.8516L0.161133 22.8545V1.05859L11.9082 4.0752ZM9.31836 10.8525C8.96951 10.8525 8.68661 11.206 8.68652 11.6416C8.68652 12.0773 8.96946 12.4307 9.31836 12.4307C9.6671 12.4304 9.9502 12.0771 9.9502 11.6416C9.95011 11.2062 9.66705 10.8528 9.31836 10.8525Z" }));
@@ -20760,11 +20985,13 @@ function ModalFrame({
   isOpen,
   onRequestClose,
   contentStyle,
+  overlayStyle,
   children
 }) {
   const styleProp = {
     overlay: {
-      zIndex: 1e3
+      zIndex: 1e3,
+      ...overlayStyle
     },
     content: contentStyle
   };
@@ -20914,21 +21141,190 @@ function SidecarModalFrame({
   };
   return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose, contentStyle: applyContentStyle, children });
 }
-var dayjs_min$1 = { exports: {} };
-var dayjs_min = dayjs_min$1.exports;
-var hasRequiredDayjs_min;
-function requireDayjs_min() {
-  if (hasRequiredDayjs_min) return dayjs_min$1.exports;
-  hasRequiredDayjs_min = 1;
-  (function(module, exports$1) {
-    !(function(t, e) {
-      module.exports = e();
-    })(dayjs_min, (function() {
-      var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $2 = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M2 = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
-        var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
-        return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
-      } }, m = function(t2, e2, n2) {
-        var r2 = String(t2);
+function measureTopOffset() {
+  const {
+    getOverlayTopOffset
+  } = getStaticData();
+  if (!getOverlayTopOffset) {
+    return 0;
+  }
+  try {
+    const offset = getOverlayTopOffset();
+    return Number.isFinite(offset) && offset > 0 ? offset : 0;
+  } catch {
+    return 0;
+  }
+}
+function FittingRoomOverlay() {
+  const {
+    t
+  } = useTranslation();
+  const fittingRoom = useMainStore((state) => state.fittingRoom);
+  const removeFromFittingRoom = useMainStore((state) => state.removeFromFittingRoom);
+  const closeOverlay = useMainStore((state) => state.closeOverlay);
+  const [topOffset, setTopOffset] = reactExports.useState(() => 0);
+  reactExports.useEffect(() => {
+    const savedScrollY = window.scrollY;
+    if (savedScrollY > 0) {
+      window.scrollTo(0, 0);
+    }
+    setTopOffset(measureTopOffset());
+    const onResize = () => setTopOffset(measureTopOffset());
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      if (savedScrollY > 0) {
+        window.scrollTo(0, savedScrollY);
+      }
+    };
+  }, []);
+  const css2 = useCss((theme) => ({
+    body: {
+      width: "100%",
+      height: "100%",
+      overflowY: "auto",
+      padding: "24px",
+      boxSizing: "border-box"
+    },
+    list: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "12px",
+      width: "100%",
+      maxWidth: "760px",
+      margin: "0 auto"
+    },
+    item: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px",
+      padding: "12px",
+      borderColor: theme.color_fg_text,
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderRadius: "8px"
+    },
+    itemHeader: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: "8px"
+    },
+    itemId: {
+      fontWeight: "bold",
+      wordBreak: "break-all"
+    },
+    itemMeta: {
+      fontSize: "13px",
+      color: theme.color_fg_text
+    },
+    itemMissing: {
+      fontSize: "13px",
+      color: theme.color_danger
+    },
+    removeButton: {
+      fontSize: "13px",
+      textDecoration: "underline"
+    },
+    empty: {
+      marginTop: "48px",
+      textAlign: "center"
+    }
+  }));
+  const overlayStyle = {
+    top: `${topOffset}px`,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "transparent"
+  };
+  const contentStyle = {
+    position: "absolute",
+    inset: 0,
+    margin: 0,
+    padding: 0,
+    border: "none",
+    borderRadius: 0,
+    backgroundColor: "#FFFFFF",
+    overflow: "hidden"
+  };
+  return /* @__PURE__ */ jsx$1(ModalFrame, { isOpen: true, onRequestClose: closeOverlay, overlayStyle, contentStyle, children: /* @__PURE__ */ jsx$1("div", { css: css2.body, children: fittingRoom.length === 0 ? /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.empty, t: "fitting_room.empty" }) : /* @__PURE__ */ jsx$1("div", { css: css2.list, children: fittingRoom.map((item) => {
+    const hasVariant = item.size != null;
+    return /* @__PURE__ */ jsxs("div", { css: css2.item, children: [
+      /* @__PURE__ */ jsxs("div", { css: css2.itemHeader, children: [
+        /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.itemId, children: item.externalId }),
+        /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.removeButton, onClick: () => removeFromFittingRoom(item.externalId), children: t("fitting_room.remove") })
+      ] }),
+      hasVariant ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.itemMeta, children: [item.size, item.color].filter(Boolean).join(" / ") }) : /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.itemMissing, t: "fitting_room.size_not_chosen" })
+    ] }, item.externalId);
+  }) }) }) });
+}
+const Link = reactExports.forwardRef(({
+  children,
+  variant,
+  css: css2,
+  ...props
+}, ref) => {
+  const variantCss = useVariantCss(variant, (theme) => ({
+    base: {
+      cursor: "pointer !important",
+      color: theme.color_fg_text,
+      fontFamily: theme.font_family,
+      fontSize: "14px",
+      textDecoration: "none"
+    },
+    brand: {
+      cursor: "pointer !important",
+      color: theme.color_fg_text,
+      fontFamily: theme.brand_font_family,
+      fontSize: "14px",
+      textDecoration: theme.brand_link_text_decoration
+    },
+    underline: {
+      cursor: "pointer !important",
+      color: theme.color_fg_text,
+      fontFamily: theme.font_family,
+      fontSize: "14px",
+      textDecoration: "underline"
+    },
+    semibold: {
+      cursor: "pointer !important",
+      color: theme.color_fg_text,
+      fontFamily: theme.font_family,
+      fontSize: "14px",
+      fontWeight: 600,
+      textDecoration: "none"
+    }
+  }));
+  return /* @__PURE__ */ jsx$1("a", { ref, css: [variantCss, css2, "", ""], ...props, children });
+});
+Link.displayName = "Link";
+function LinkT({
+  t,
+  vars,
+  ...props
+}) {
+  const {
+    t: translate
+  } = useTranslation();
+  const translatedText = translate(t, vars);
+  return /* @__PURE__ */ jsx$1(Link, { ...props, children: translatedText });
+}
+var dayjs_min$1 = { exports: {} };
+var dayjs_min = dayjs_min$1.exports;
+var hasRequiredDayjs_min;
+function requireDayjs_min() {
+  if (hasRequiredDayjs_min) return dayjs_min$1.exports;
+  hasRequiredDayjs_min = 1;
+  (function(module, exports$1) {
+    !(function(t, e) {
+      module.exports = e();
+    })(dayjs_min, (function() {
+      var t = 1e3, e = 6e4, n = 36e5, r = "millisecond", i = "second", s = "minute", u = "hour", a = "day", o = "week", c = "month", f = "quarter", h = "year", d = "date", l = "Invalid Date", $2 = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, y = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, M2 = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(t2) {
+        var e2 = ["th", "st", "nd", "rd"], n2 = t2 % 100;
+        return "[" + t2 + (e2[(n2 - 20) % 10] || e2[n2] || e2[0]) + "]";
+      } }, m = function(t2, e2, n2) {
+        var r2 = String(t2);
         return !r2 || r2.length >= e2 ? t2 : "" + Array(e2 + 1 - r2.length).join(n2) + t2;
       }, v = { s: m, z: function(t2) {
         var e2 = -t2.utcOffset(), n2 = Math.abs(e2), r2 = Math.floor(n2 / 60), i2 = n2 % 60;
@@ -22385,7 +22781,7 @@ const defaultLogHandler = (instance2, logType, ...args) => {
     throw new Error(`Attempted to log a message with an invalid logType (value: ${logType})`);
   }
 };
-let Logger$1 = class Logger2 {
+class Logger3 {
   /**
    * Gives you an instance of a Logger to capture messages according to
    * Firebase's logging scheme.
@@ -22449,7 +22845,7 @@ let Logger$1 = class Logger2 {
     this._userLogHandler && this._userLogHandler(this, LogLevel.ERROR, ...args);
     this._logHandler(this, LogLevel.ERROR, ...args);
   }
-};
+}
 const instanceOfAny = (object, constructors) => constructors.some((c) => object instanceof c);
 let idbProxyableTypes;
 let cursorAdvanceMethods;
@@ -22677,7 +23073,7 @@ function isVersionServiceProvider(provider) {
 }
 const name$q = "@firebase/app";
 const version$1$1 = "0.14.5";
-const logger$6 = new Logger$1("@firebase/app");
+const logger$b = new Logger3("@firebase/app");
 const name$p = "@firebase/app-compat";
 const name$o = "@firebase/analytics-compat";
 const name$n = "@firebase/analytics";
@@ -22744,13 +23140,13 @@ function _addComponent(app, component) {
   try {
     app.container.addComponent(component);
   } catch (e) {
-    logger$6.debug(`Component ${component.name} failed to register with FirebaseApp ${app.name}`, e);
+    logger$b.debug(`Component ${component.name} failed to register with FirebaseApp ${app.name}`, e);
   }
 }
 function _registerComponent(component) {
   const componentName = component.name;
   if (_components.has(componentName)) {
-    logger$6.debug(`There were multiple attempts to register component ${componentName}.`);
+    logger$b.debug(`There were multiple attempts to register component ${componentName}.`);
     return false;
   }
   _components.set(componentName, component);
@@ -22959,7 +23355,7 @@ function registerVersion(libraryKeyOrName, version2, variant) {
     if (versionMismatch) {
       warning.push(`version name "${version2}" contains illegal characters (whitespace or "/")`);
     }
-    logger$6.warn(warning.join(" "));
+    logger$b.warn(warning.join(" "));
     return;
   }
   _registerComponent(new Component(
@@ -23003,12 +23399,12 @@ async function readHeartbeatsFromIndexedDB(app) {
     return result;
   } catch (e) {
     if (e instanceof FirebaseError) {
-      logger$6.warn(e.message);
+      logger$b.warn(e.message);
     } else {
       const idbGetError = ERROR_FACTORY.create("idb-get", {
         originalErrorMessage: e?.message
       });
-      logger$6.warn(idbGetError.message);
+      logger$b.warn(idbGetError.message);
     }
   }
 }
@@ -23021,12 +23417,12 @@ async function writeHeartbeatsToIndexedDB(app, heartbeatObject) {
     await tx.done;
   } catch (e) {
     if (e instanceof FirebaseError) {
-      logger$6.warn(e.message);
+      logger$b.warn(e.message);
     } else {
       const idbGetError = ERROR_FACTORY.create("idb-set", {
         originalErrorMessage: e?.message
       });
-      logger$6.warn(idbGetError.message);
+      logger$b.warn(idbGetError.message);
     }
   }
 }
@@ -23075,7 +23471,7 @@ class HeartbeatServiceImpl {
       }
       return this._storage.overwrite(this._heartbeatsCache);
     } catch (e) {
-      logger$6.warn(e);
+      logger$b.warn(e);
     }
   }
   /**
@@ -23106,7 +23502,7 @@ class HeartbeatServiceImpl {
       }
       return headerString;
     } catch (e) {
-      logger$6.warn(e);
+      logger$b.warn(e);
       return "";
     }
   }
@@ -25742,7 +26138,7 @@ User.UNAUTHENTICATED = new User(null), // TODO(mikelehen): Look into getting a p
 // non-FirebaseAuth providers.
 User.GOOGLE_CREDENTIALS = new User("google-credentials-uid"), User.FIRST_PARTY = new User("first-party-uid"), User.MOCK_USER = new User("mock-user");
 let x = "12.3.0";
-const O = new Logger$1("@firebase/firestore");
+const O = new Logger3("@firebase/firestore");
 function __PRIVATE_getLogLevel() {
   return O.logLevel;
 }
@@ -35492,7 +35888,7 @@ function _prodErrorMap() {
 }
 const prodErrorMap = _prodErrorMap;
 const _DEFAULT_AUTH_ERROR_FACTORY = new ErrorFactory("auth", "Firebase", _prodErrorMap());
-const logClient = new Logger$1("@firebase/auth");
+const logClient = new Logger3("@firebase/auth");
 function _logWarn(msg, ...args) {
   if (logClient.logLevel <= LogLevel.WARN) {
     logClient.warn(`Auth (${SDK_VERSION}): ${msg}`, ...args);
@@ -40670,218 +41066,87 @@ registerAuth(
   "Browser"
   /* ClientPlatform.BROWSER */
 );
-let debugSource = false;
-function _init$4(debug) {
-  if (debug) {
-    let escapeRegExp = function(string) {
-      return "^" + string.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, ".*").replace(/\?/g, ".") + "$";
-    };
-    if (debug === true) {
-      debugSource = true;
-    } else if (debug instanceof RegExp) {
-      debugSource = debug;
-    } else if (Array.isArray(debug)) {
-      debugSource = new RegExp(debug.map((s) => escapeRegExp(s)).join("|"));
-    } else if (typeof debug === "string") {
-      debugSource = new RegExp(escapeRegExp(debug));
+const firebaseDateToDayjs = (date) => {
+  return dayjs(date.seconds * 1e3);
+};
+const LOGIN_TRACKING_PERIOD_SECONDS = 1800;
+const logger$a = getLogger("firebase");
+let firebaseApp = null;
+class FirestoreManager {
+  constructor(firestore) {
+    this.firestore = firestore;
+  }
+  async getDocData(collectionName, docId) {
+    const docRef = this.doc(collectionName, docId);
+    const docSnap = await getDoc(docRef);
+    if (docSnap.exists()) {
+      return docSnap.data();
+    } else {
+      return null;
     }
   }
-}
-function isDebugSource(source) {
-  if (typeof debugSource === "boolean") {
-    return debugSource;
+  async setDocData(collectionName, docId, data) {
+    const docRef = this.doc(collectionName, docId);
+    await setDoc(docRef, data);
   }
-  return debugSource.test(source);
-}
-function log(entry) {
-  const {
-    source,
-    level,
-    message,
-    data,
-    duration
-  } = entry;
-  if (level === "debug" && !isDebugSource(source)) {
-    return;
+  async mergeDocData(collectionName, docId, data) {
+    const docRef = this.doc(collectionName, docId);
+    await setDoc(docRef, data, {
+      merge: true
+    });
   }
-  let finalMessage = message;
-  if (finalMessage.includes("{{")) {
-    finalMessage = finalMessage.replace(/{{ts}}/g, (/* @__PURE__ */ new Date()).toISOString());
+  listenToDoc(collectionName, docId, callback) {
+    const docRef = this.doc(collectionName, docId);
+    const unsubscribe = onSnapshot(docRef, (docSnap) => {
+      if (docSnap.exists()) {
+        callback(docSnap.data());
+      } else {
+        callback(null);
+      }
+    });
+    return unsubscribe;
   }
-  finalMessage = `[TFR ${source}][${level.toUpperCase()}] ${finalMessage}`;
-  const logData = [finalMessage];
-  if (duration !== void 0) {
-    logData.push(`${duration.toFixed(2)} ms`);
+  // listenToSubDoc subscribes to <parent>/<parentID>/<sub>/<subID>. Used for
+  // VTO compositions which live at users/{uid}/vto_compositions/{token}.
+  listenToSubDoc(parent, parentID, sub, subID, callback) {
+    const docRef = doc(this.firestore, parent, parentID, sub, subID);
+    return onSnapshot(docRef, (snap) => {
+      if (snap.exists()) {
+        callback(snap.data());
+      } else {
+        callback(null);
+      }
+    });
   }
-  if (data) {
-    logData.push(data);
+  async queryDocs(collectionName, constraints) {
+    const q2 = query(this.collection(collectionName), ...constraints);
+    return getDocs(q2);
   }
-  switch (level) {
-    case "error":
-      console.error(...logData);
-      break;
-    case "warn":
-      console.warn(...logData);
-      break;
-    case "info":
-      console.info(...logData);
-      break;
-    case "debug":
-      console.debug(...logData);
-      break;
-    default:
-      console.log(...logData);
+  collection(collectionName) {
+    return collection(this.firestore, collectionName);
   }
-}
-class Logger3 {
-  constructor(source) {
-    this.timers = {};
-    this.source = source;
+  doc(collectionName, docId) {
+    return doc(this.firestore, collectionName, docId);
   }
-  logError(message, data = null) {
-    log({
-      source: this.source,
-      level: "error",
-      message,
-      data
-    });
+}
+let firestoreManager = null;
+function getFirestoreManager() {
+  if (!firestoreManager) {
+    throw new Error("Firebase not initialized. Call _init first.");
   }
-  logWarn(message, data = null) {
-    log({
-      source: this.source,
-      level: "warn",
-      message,
-      data
-    });
-  }
-  logInfo(message, data = null) {
-    log({
-      source: this.source,
-      level: "info",
-      message,
-      data
-    });
-  }
-  logDebug(message, data = null) {
-    log({
-      source: this.source,
-      level: "debug",
-      message,
-      data
-    });
-  }
-  logTimer(timerName, message, data = null) {
-    const duration = this.getTimerDuration(timerName);
-    log({
-      source: this.source,
-      level: "debug",
-      message,
-      data,
-      duration: duration ?? void 0
-    });
-  }
-  clearTimers() {
-    this.timers = {};
-  }
-  timerStart(name2) {
-    this.timers[name2] = [performance.now(), null];
-  }
-  timerEnd(name2) {
-    const timer = this.timers[name2];
-    if (timer && timer[1] === null) {
-      timer[1] = performance.now();
-    }
-  }
-  getTimers() {
-    const result = {};
-    for (const name2 in this.timers) {
-      result[name2] = this.getTimerDuration(name2);
-    }
-    return result;
-  }
-  getTimerDuration(name2) {
-    const timer = this.timers[name2];
-    if (timer && timer[1] !== null) {
-      return timer[1] - timer[0];
-    }
-    return null;
-  }
-  isDebugEnabled() {
-    return isDebugSource(this.source);
-  }
-}
-function getLogger(source) {
-  return new Logger3(source);
-}
-const firebaseDateToDayjs = (date) => {
-  return dayjs(date.seconds * 1e3);
-};
-const LOGIN_TRACKING_PERIOD_SECONDS = 1800;
-const logger$5 = getLogger("firebase");
-let firebaseApp = null;
-class FirestoreManager {
-  constructor(firestore) {
-    this.firestore = firestore;
-  }
-  async getDocData(collectionName, docId) {
-    const docRef = this.doc(collectionName, docId);
-    const docSnap = await getDoc(docRef);
-    if (docSnap.exists()) {
-      return docSnap.data();
-    } else {
-      return null;
-    }
-  }
-  async setDocData(collectionName, docId, data) {
-    const docRef = this.doc(collectionName, docId);
-    await setDoc(docRef, data);
-  }
-  async mergeDocData(collectionName, docId, data) {
-    const docRef = this.doc(collectionName, docId);
-    await setDoc(docRef, data, {
-      merge: true
-    });
-  }
-  listenToDoc(collectionName, docId, callback) {
-    const docRef = this.doc(collectionName, docId);
-    const unsubscribe = onSnapshot(docRef, (docSnap) => {
-      if (docSnap.exists()) {
-        callback(docSnap.data());
-      } else {
-        callback(null);
-      }
-    });
-    return unsubscribe;
-  }
-  async queryDocs(collectionName, constraints) {
-    const q2 = query(this.collection(collectionName), ...constraints);
-    return getDocs(q2);
-  }
-  collection(collectionName) {
-    return collection(this.firestore, collectionName);
-  }
-  doc(collectionName, docId) {
-    return doc(this.firestore, collectionName, docId);
-  }
-}
-let firestoreManager = null;
-function getFirestoreManager() {
-  if (!firestoreManager) {
-    throw new Error("Firebase not initialized. Call _init first.");
-  }
-  return firestoreManager;
-}
-class AuthManager {
-  constructor(auth, brandId) {
-    this.userProfile = null;
-    this.authStateChangeListeners = /* @__PURE__ */ new Set();
-    this.userProfileChangeListeners = /* @__PURE__ */ new Set();
-    this.listenToUserProfileUnsub = null;
-    this.auth = auth;
-    this.brandId = brandId;
-    this.addAuthStateChangeListener((authUser) => this.handleAuthStateChanged(authUser));
-    onAuthStateChanged(this.auth, (authUser) => {
-      this.authStateChangeListeners.forEach((callback) => callback(authUser));
+  return firestoreManager;
+}
+class AuthManager {
+  constructor(auth, brandId) {
+    this.userProfile = null;
+    this.authStateChangeListeners = /* @__PURE__ */ new Set();
+    this.userProfileChangeListeners = /* @__PURE__ */ new Set();
+    this.listenToUserProfileUnsub = null;
+    this.auth = auth;
+    this.brandId = brandId;
+    this.addAuthStateChangeListener((authUser) => this.handleAuthStateChanged(authUser));
+    onAuthStateChanged(this.auth, (authUser) => {
+      this.authStateChangeListeners.forEach((callback) => callback(authUser));
     });
   }
   addAuthStateChangeListener(callback) {
@@ -40945,7 +41210,7 @@ class AuthManager {
       this.listenToUserProfileUnsub = null;
     }
     if (authUser) {
-      logger$5.logDebug("User logged in:", {
+      logger$a.logDebug("User logged in:", {
         uid: authUser.uid
       });
       this.listenToUserProfileUnsub = getFirestoreManager().listenToDoc("users", authUser.uid, (doc2) => {
@@ -40979,7 +41244,7 @@ class AuthManager {
             await firestore.mergeDocData("user_logging", userLoggingDocId, userLoggingData);
           }
         } catch (error) {
-          logger$5.logError("Error logging user login activity:", {
+          logger$a.logError("Error logging user login activity:", {
             error
           });
         }
@@ -40997,7 +41262,7 @@ function getAuthManager() {
   }
   return authManager;
 }
-async function _init$3() {
+async function _init$4() {
   const {
     brandId,
     config
@@ -41028,7 +41293,7 @@ async function _init$3() {
   }
 }
 const CONTACT_US_LINK = "mailto:info@thefittingroom.tech?subject=Forgot%20Password%20Assistance";
-const logger$4 = getLogger("forgot-password");
+const logger$9 = getLogger("forgot-password");
 function ForgotPasswordOverlay({
   returnToOverlay
 }) {
@@ -41094,7 +41359,7 @@ function ForgotPasswordOverlay({
         await authManager2.sendPasswordResetEmail(email2);
         setLinkSent(true);
       } catch (error) {
-        logger$4.logError("Error sending password reset email:", {
+        logger$9.logError("Error sending password reset email:", {
           error
         });
       }
@@ -41313,7 +41578,7 @@ function TfrTitle() {
   }));
   return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.nameIcon }) });
 }
-const logger$3 = getLogger("sign-in");
+const logger$8 = getLogger("sign-in");
 function SignInOverlay({
   returnToOverlay
 }) {
@@ -41387,7 +41652,7 @@ function SignInOverlay({
           closeOverlay();
         }
       } catch (error) {
-        logger$3.logError("Login failed:", {
+        logger$8.logError("Login failed:", {
           error
         });
         setEmailError(" ");
@@ -41783,7 +42048,7 @@ function Loading({
 }
 let baseUrl;
 let responseCache = {};
-function _init$2() {
+function _init$3() {
   const {
     config
   } = getStaticData();
@@ -41851,13 +42116,14 @@ async function getSizeRecommendation(styleId) {
     endpoint: `/v1/styles/${styleId}/recommendation`
   });
 }
-async function requestVtoSingle(colorwaySizeAssetId) {
-  await execApiRequest({
-    useCache: true,
-    // although this is a POST, we only want to send it once
+async function requestVto(items) {
+  return await execApiRequest({
     useToken: true,
     method: "POST",
-    endpoint: `/v1/colorway-size-assets/${colorwaySizeAssetId}/frames`
+    endpoint: "/v1/vto-compositions",
+    body: {
+      items
+    }
   });
 }
 const recordCache = {};
@@ -41875,45 +42141,82 @@ async function getStyleByExternalId(brandId, externalId) {
   recordCache[cacheKey] = record;
   return record;
 }
-async function getStyleGarmentCategoryById(styleGarmentCategoryId) {
-  const cacheKey = `getStyleGarmentCategoryById/${styleGarmentCategoryId}`;
-  if (recordCache[cacheKey]) {
-    return recordCache[cacheKey];
-  }
-  const firestore = getFirestoreManager();
-  const record = await firestore.getDocData("style_garment_categories", styleGarmentCategoryId.toString());
-  if (!record) {
-    return null;
+const logger$7 = getLogger("product");
+function _init$2() {
+  useMainStore.subscribe((state, prevState) => {
+    if (state.userHasAvatar && !prevState.userHasAvatar) {
+      const {
+        currentProduct
+      } = getStaticData();
+      if (currentProduct) {
+        loadProductDataToStore(currentProduct.externalId);
+      }
+    }
+  });
+}
+async function loadProductData(externalId) {
+  const {
+    brandId
+  } = getStaticData();
+  const style = await getStyleByExternalId(brandId, externalId);
+  if (!style) {
+    throw new Error(`Style not found for externalId: ${externalId}`);
   }
-  recordCache[cacheKey] = record;
-  return record;
+  const sizeFitRecommendation = await getSizeRecommendation(style.id);
+  return {
+    externalId,
+    style,
+    sizeFitRecommendation
+  };
 }
-function getSizeLabelFromSize(size) {
-  if (size.label) {
-    return size.label;
+function loadProductDataToStore(externalId) {
+  async function loadAndStore() {
+    try {
+      const productData2 = await loadProductData(externalId);
+      useMainStore.getState().setProductData(productData2.externalId, productData2);
+      logger$7.logDebug(`Loaded product data for externalId: ${externalId}`, {
+        productData: productData2
+      });
+    } catch (error) {
+      logger$7.logError(`Error loading product data for externalId: ${externalId}`, {
+        error
+      });
+    }
   }
-  return size.size_value?.name ?? null;
+  const {
+    userIsLoggedIn,
+    userHasAvatar,
+    productData
+  } = useMainStore.getState();
+  if (productData[externalId] || !userIsLoggedIn || userHasAvatar === false) {
+    return;
+  }
+  loadAndStore();
 }
+const NON_PRIORITY_VTO_REQUEST_DELAY_MS = 500;
 const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
 const AVATAR_GUTTER_HEIGHT_PX = 100;
 const CONTENT_AREA_WIDTH_PX = 550;
-const logger$2 = getLogger("overlays/vto-single");
+const logger$6 = getLogger("overlays/vto-single");
+function compositionKey(csaId, tucked) {
+  return `${csaId}:${0}`;
+}
 function VtoSingleOverlay() {
-  const {
-    brandId
-  } = getStaticData();
   const userIsLoggedIn = useMainStore((state) => state.userIsLoggedIn);
   const userHasAvatar = useMainStore((state) => state.userHasAvatar);
   const userProfile = useMainStore((state) => state.userProfile);
+  const storeProductData = useMainStore((state) => state.productData);
   const deviceLayout = useMainStore((state) => state.deviceLayout);
   const openOverlay = useMainStore((state) => state.openOverlay);
   const closeOverlay = useMainStore((state) => state.closeOverlay);
-  const [loadedProductData, setLoadedProductData] = reactExports.useState(null);
+  const [vtoProductData, setVtoProductData] = reactExports.useState(null);
   const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
   const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
   const [modalStyle, setModalStyle] = reactExports.useState({});
-  const fetchedVtoSkus = reactExports.useRef(/* @__PURE__ */ new Set());
-  const readyVtoSkus = reactExports.useRef(/* @__PURE__ */ new Set());
+  const compositionTokensRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const [vtoDocsByToken, setVtoDocsByToken] = reactExports.useState({});
+  const subscriptionsRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const lastPriorityVtoRequestTimeRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
     if (!userIsLoggedIn) {
       openOverlay(OverlayName.LANDING, {
@@ -41930,15 +42233,30 @@ function VtoSingleOverlay() {
     }
   }, [userIsLoggedIn, userHasAvatar, openOverlay]);
   reactExports.useEffect(() => {
-    async function fetchInitialData() {
+    const {
+      currentProduct
+    } = getStaticData();
+    if (!currentProduct) {
+      return;
+    }
+    loadProductDataToStore(currentProduct.externalId);
+  }, []);
+  reactExports.useEffect(() => {
+    async function setupInitialVtoData() {
       try {
-        logger$2.clearTimers();
-        logger$2.timerStart("fetchInitialData");
-        logger$2.logDebug("{{ts}} - Starting fetch of initial data");
-        logger$2.timerStart("fetchInitialData_1_getProductData");
         const {
           currentProduct
         } = getStaticData();
+        if (!currentProduct) {
+          return;
+        }
+        const storeProduct = storeProductData[currentProduct.externalId];
+        if (!storeProduct) {
+          return;
+        }
+        if ("error" in storeProduct) {
+          throw storeProduct.error;
+        }
         const {
           productName,
           productDescriptionHtml,
@@ -41947,26 +42265,15 @@ function VtoSingleOverlay() {
         const {
           color: selectedColor
         } = await currentProduct.getSelectedOptions();
-        logger$2.timerEnd("fetchInitialData_1_getProductData");
-        logger$2.timerStart("fetchInitialData_2_getStyleData");
-        const styleRec = await getStyleByExternalId(brandId, currentProduct.externalId);
-        if (!styleRec) {
-          throw new Error(`Style not found for externalId: ${currentProduct.externalId}`);
-        }
-        const styleGarmentCategoryRec = await getStyleGarmentCategoryById(styleRec.style_garment_category_id);
-        const styleCategoryLabel = styleGarmentCategoryRec?.style_category_label ?? null;
-        logger$2.timerEnd("fetchInitialData_2_getStyleData");
-        logger$2.timerStart("fetchInitialData_3_getSizeRecommendation");
-        const sizeRecommendationRecord = await getSizeRecommendation(styleRec.id);
-        logger$2.timerEnd("fetchInitialData_3_getSizeRecommendation");
-        logger$2.timerStart("fetchInitialData_4_assembleLoadedData");
+        const styleCategoryLabel = storeProduct.style.style_category_label || null;
+        const sizeRecommendationRecord = storeProduct.sizeFitRecommendation;
         {
           const recommendedSizeId = sizeRecommendationRecord.recommended_size.id || null;
           const recommendedSizeLabel = getSizeLabelFromSize(sizeRecommendationRecord.recommended_size);
           if (recommendedSizeId == null || recommendedSizeLabel == null) {
             throw new Error(`No recommended size found for externalId: ${currentProduct.externalId}`);
           }
-          let productData;
+          let vtoProductData2;
           {
             const fitClassification = sizeRecommendationRecord.fit_classification;
             const sizes = [];
@@ -41987,7 +42294,7 @@ function VtoSingleOverlay() {
                 const sku = csaRec.sku;
                 const variant = variants.find((v) => v.sku === sku);
                 if (!variant) {
-                  logger$2.logWarn(`Variant not found for externalId: ${currentProduct.externalId} sizeId: ${sizeId} sku: ${sku}`);
+                  logger$6.logWarn(`Variant not found for externalId: ${currentProduct.externalId} sizeId: ${sizeId} sku: ${sku}`);
                   continue;
                 }
                 const colorLabel = variant.color || null;
@@ -42000,7 +42307,7 @@ function VtoSingleOverlay() {
                 });
               }
               if (!colors.length) {
-                logger$2.logWarn(`No valid colorways found for externalId: ${currentProduct.externalId} sizeId: ${sizeId}`);
+                logger$6.logWarn(`No valid colorways found for externalId: ${currentProduct.externalId} sizeId: ${sizeId}`);
                 continue;
               }
               sizes.push({
@@ -42014,7 +42321,7 @@ function VtoSingleOverlay() {
             if (!sizes.length) {
               throw new Error(`No valid sizes found for externalId: ${currentProduct.externalId}`);
             }
-            productData = {
+            vtoProductData2 = {
               productName,
               productDescriptionHtml,
               fitClassification,
@@ -42026,7 +42333,7 @@ function VtoSingleOverlay() {
           }
           let recommendedColorLabel = null;
           {
-            const recommendedSizeRecord = productData.sizes.find((s) => s.isRecommended);
+            const recommendedSizeRecord = vtoProductData2.sizes.find((s) => s.isRecommended);
             if (!recommendedSizeRecord) {
               throw new Error("Recommended size record not found");
             }
@@ -42038,41 +42345,35 @@ function VtoSingleOverlay() {
             }) || recommendedSizeRecord.colors[0];
             recommendedColorLabel = recommendedSizeColorRecord?.colorLabel ?? null;
           }
-          setLoadedProductData(productData);
+          setVtoProductData(vtoProductData2);
           setSelectedSizeLabel(recommendedSizeLabel);
           setSelectedColorLabel(recommendedColorLabel);
         }
-        for (const sku in userProfile?.vto?.[brandId] ?? {}) {
-          fetchedVtoSkus.current.add(sku);
-          readyVtoSkus.current.add(sku);
-        }
-        logger$2.timerEnd("fetchInitialData_4_assembleLoadedData");
-        logger$2.timerEnd("fetchInitialData");
-        logger$2.logTimer("total", "{{ts}} - Completed fetch of initial data", logger$2.getTimers());
       } catch (error) {
-        logger$2.logError("Error fetching initial data:", {
+        logger$6.logError("Error fetching initial data:", {
           error
         });
-        setLoadedProductData(false);
+        setVtoProductData(false);
         setSelectedSizeLabel(null);
         setSelectedColorLabel(null);
       }
     }
-    if (userIsLoggedIn && userHasAvatar && userProfile && loadedProductData == null) {
-      fetchInitialData();
+    if (vtoProductData !== null) {
+      return;
     }
-  }, [userIsLoggedIn, userHasAvatar, userProfile, loadedProductData]);
+    setupInitialVtoData();
+  }, [storeProductData, vtoProductData, userProfile]);
   const {
     sizeColorRecord: selectedColorSizeRecord,
     availableColorLabels
   } = reactExports.useMemo(() => {
-    if (!loadedProductData) {
+    if (!vtoProductData) {
       return {
         sizeColorRecord: null,
         availableColorLabels: []
       };
     }
-    const sizeRecord = loadedProductData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
+    const sizeRecord = vtoProductData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
     if (!sizeRecord || !sizeRecord.colors.length) {
       return {
         sizeColorRecord: null,
@@ -42085,74 +42386,141 @@ function VtoSingleOverlay() {
       sizeColorRecord,
       availableColorLabels: availableColorLabels2
     };
-  }, [loadedProductData, selectedSizeLabel, selectedColorLabel]);
-  const requestVto = reactExports.useCallback((sizeColorRecord) => {
-    if (fetchedVtoSkus.current.has(sizeColorRecord.sku)) {
+  }, [vtoProductData, selectedSizeLabel, selectedColorLabel]);
+  const requestVto$1 = reactExports.useCallback((sizeColorRecord, priority) => {
+    const csaId = sizeColorRecord.colorwaySizeAssetId;
+    const key = compositionKey(csaId);
+    if (compositionTokensRef.current.has(key)) {
       return;
     }
-    logger$2.timerStart(`requestVto_${sizeColorRecord.sku}`);
-    logger$2.logDebug(`{{ts}} - Requesting VTO for sku: ${sizeColorRecord.sku}`, {
-      sizeColorRecord
-    });
-    fetchedVtoSkus.current.add(sizeColorRecord.sku);
-    requestVtoSingle(sizeColorRecord.colorwaySizeAssetId).catch((error) => {
-      logger$2.logError("Error requesting VTO:", {
-        error,
+    function executeRequest() {
+      logger$6.timerStart(`requestVto_${sizeColorRecord.sku}`);
+      logger$6.logDebug(`{{ts}} - Requesting VTO for sku: ${sizeColorRecord.sku}`, {
+        priority,
         sizeColorRecord
       });
+      compositionTokensRef.current.set(key, "");
+      requestVto([{
+        colorway_size_asset_id: csaId,
+        tucked: false
+      }]).then((resp) => {
+        compositionTokensRef.current.set(key, resp.token);
+        subscribeToCompositionToken(resp.token, sizeColorRecord.sku);
+      }).catch((error) => {
+        logger$6.logError(`Error requesting VTO for sku: ${sizeColorRecord.sku}`, {
+          error,
+          sizeColorRecord
+        });
+        compositionTokensRef.current.delete(key);
+      });
+    }
+    {
+      let delay = 0;
+      if (priority) {
+        lastPriorityVtoRequestTimeRef.current = Date.now();
+      } else {
+        const lastPriorityTime = lastPriorityVtoRequestTimeRef.current;
+        if (lastPriorityTime) {
+          const now = Date.now();
+          const minNextRequestTime = lastPriorityTime + NON_PRIORITY_VTO_REQUEST_DELAY_MS;
+          if (now < minNextRequestTime) {
+            delay = minNextRequestTime - now;
+          }
+        }
+      }
+      if (delay) {
+        setTimeout(executeRequest, delay);
+        return;
+      }
+    }
+    executeRequest();
+  }, []);
+  const subscribeToCompositionToken = reactExports.useCallback((token2, sku) => {
+    if (subscriptionsRef.current.has(token2)) {
+      return;
+    }
+    const authManager2 = getAuthManager();
+    const uid = authManager2.getAuthUser()?.uid;
+    if (!uid) {
+      logger$6.logWarn(`subscribe to vto composition skipped: no uid`, {
+        token: token2,
+        sku
+      });
+      return;
+    }
+    const unsub = getFirestoreManager().listenToSubDoc("users", uid, "vto_compositions", token2, (data) => {
+      if (data && data.frames && data.frames.length > 0) {
+        logger$6.timerEnd(`requestVto_${sku}`);
+        logger$6.logTimer(`requestVto_${sku}`, `{{ts}} - VTO data is loaded for sku: ${sku}`);
+      }
+      setVtoDocsByToken((prev2) => ({
+        ...prev2,
+        [token2]: data ?? {}
+      }));
     });
+    subscriptionsRef.current.set(token2, unsub);
+  }, []);
+  reactExports.useEffect(() => {
+    return () => {
+      subscriptionsRef.current.forEach((unsub) => {
+        try {
+          unsub();
+        } catch (e) {
+          logger$6.logError("Error unsubscribing from vto composition", {
+            error: e
+          });
+        }
+      });
+      subscriptionsRef.current.clear();
+    };
   }, []);
   reactExports.useEffect(() => {
     if (selectedColorSizeRecord) {
-      requestVto(selectedColorSizeRecord);
+      requestVto$1(selectedColorSizeRecord, true);
     }
-  }, [requestVto, selectedColorSizeRecord]);
+  }, [requestVto$1, selectedColorSizeRecord]);
   reactExports.useEffect(() => {
-    if (!loadedProductData) {
+    if (!vtoProductData) {
       return;
     }
-    for (const sizeRecord of loadedProductData.sizes) {
+    for (const sizeRecord of vtoProductData.sizes) {
       const sizeColorRecord = sizeRecord.colors.find((c) => c.colorLabel === selectedColorLabel) ?? sizeRecord.colors[0];
       if (sizeColorRecord) {
-        requestVto(sizeColorRecord);
+        requestVto$1(sizeColorRecord, false);
       }
     }
-  }, [requestVto, loadedProductData, selectedColorLabel]);
+  }, [requestVto$1, vtoProductData, selectedColorLabel]);
   const vtoData = reactExports.useMemo(() => {
-    if (!userProfile || !selectedColorSizeRecord) {
+    if (!selectedColorSizeRecord) {
       return null;
     }
-    const availableSkuData = userProfile.vto?.[brandId];
-    if (!availableSkuData) {
+    const key = compositionKey(selectedColorSizeRecord.colorwaySizeAssetId);
+    const token2 = compositionTokensRef.current.get(key);
+    if (!token2) {
       return null;
     }
-    if (logger$2.isDebugEnabled()) {
-      for (const sku of fetchedVtoSkus.current) {
-        if (!readyVtoSkus.current.has(sku) && availableSkuData[sku]) {
-          readyVtoSkus.current.add(sku);
-          logger$2.timerEnd(`requestVto_${sku}`);
-          logger$2.logTimer(`requestVto_${sku}`, `{{ts}} - VTO data is loaded for sku: ${sku}`);
-        }
-      }
-    }
-    const vtoData2 = availableSkuData[selectedColorSizeRecord.sku];
-    if (!vtoData2) {
+    const doc2 = vtoDocsByToken[token2];
+    if (!doc2 || !doc2.frames || doc2.frames.length === 0) {
       return null;
     }
-    if (vtoData2.frames) {
-      vtoData2.frames.forEach((frameUrl) => {
-        const img = new Image();
-        img.src = frameUrl;
-      });
-    }
-    return vtoData2;
-  }, [selectedColorSizeRecord, userProfile]);
-  const frameUrls = vtoData?.frames ?? null;
+    logger$6.logDebug(`{{ts}} - Displaying VTO for sku: ${selectedColorSizeRecord.sku}`);
+    return doc2;
+  }, [selectedColorSizeRecord, vtoDocsByToken]);
+  const frameUrls = reactExports.useMemo(() => {
+    if (!vtoData?.frames) return null;
+    const baseUrl2 = getStaticData().config.frames.baseUrl;
+    const rewritten = vtoData.frames.map((u) => applyFrameBaseUrl(u, baseUrl2));
+    rewritten.forEach((url) => {
+      const img = new Image();
+      img.src = url;
+    });
+    return rewritten;
+  }, [vtoData]);
   const handleSignOutClick = reactExports.useCallback(() => {
     closeOverlay();
     const authManager2 = getAuthManager();
     authManager2.logout().catch((error) => {
-      logger$2.logError("Error during logout:", {
+      logger$6.logError("Error during logout:", {
         error
       });
     });
@@ -42165,21 +42533,24 @@ function VtoSingleOverlay() {
       const {
         currentProduct
       } = getStaticData();
+      if (!currentProduct) {
+        return;
+      }
       closeOverlay();
       await currentProduct.addToCart({
         size: selectedSizeLabel,
         color: selectedColorLabel
       });
     } catch (error) {
-      logger$2.logError("Error adding to cart:", {
+      logger$6.logError("Error adding to cart:", {
         error
       });
     }
   }, [selectedColorLabel, selectedSizeLabel]);
-  if (loadedProductData === false) {
+  if (vtoProductData === false) {
     return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(NoFitLayout, { onClose: closeOverlay, onSignOut: handleSignOutClick }) });
   }
-  if (!userIsLoggedIn || !userHasAvatar || loadedProductData == null || !selectedColorSizeRecord) {
+  if (!userIsLoggedIn || !userHasAvatar || vtoProductData == null || !selectedColorSizeRecord) {
     return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(Loading, {}) });
   }
   let Layout;
@@ -42188,7 +42559,7 @@ function VtoSingleOverlay() {
   } else {
     Layout = DesktopLayout;
   }
-  return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, contentStyle: modalStyle, children: /* @__PURE__ */ jsx$1(Layout, { loadedProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }) });
+  return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, contentStyle: modalStyle, children: /* @__PURE__ */ jsx$1(Layout, { loadedProductData: vtoProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }) });
 }
 function NoFitLayout({
   onClose,
@@ -43145,65 +43516,262 @@ function Footer({
     /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.tfrIcon })
   ] });
 }
-function useSizeRecommendation(load) {
-  const [record, setRecord] = reactExports.useState(null);
-  const [isLoading, setIsLoading] = reactExports.useState(false);
-  const [error, setError] = reactExports.useState(null);
+const logger$5 = getLogger("widgets/add-to-fitting-room-compact");
+function AddToFittingRoomCompactWidget({
+  attributes
+}) {
   const {
-    userHasAvatar
-  } = useMainStore();
-  reactExports.useEffect(() => {
-    if (!load || !userHasAvatar) {
+    t
+  } = useTranslation();
+  const {
+    currentProduct
+  } = getStaticData();
+  const attrProductId = attributes["product-id"];
+  const productId = attrProductId || currentProduct?.externalId || null;
+  const isPdp = productId != null && productId === currentProduct?.externalId;
+  const isInFittingRoom = useMainStore((state) => productId == null ? false : state.fittingRoom.some((item) => item.externalId === productId));
+  const css2 = useCss((theme) => ({
+    button: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "36px",
+      height: "36px",
+      padding: 0,
+      backgroundColor: "transparent",
+      border: "none",
+      borderRadius: "50%",
+      cursor: "pointer"
+    },
+    buttonAdded: {
+      backgroundColor: theme.color_fg_text
+    },
+    icon: {
+      width: "24px",
+      height: "24px",
+      color: theme.color_fg_text
+    },
+    iconAdded: {
+      color: "#FFFFFF"
+    }
+  }));
+  if (productId == null) {
+    return null;
+  }
+  const handleClick = () => {
+    toggleFittingRoomItem(productId, isPdp).catch((error) => {
+      logger$5.logError("toggleFittingRoomItem failed", {
+        error
+      });
+    });
+  };
+  const ariaLabel = t(isInFittingRoom ? "added_to_fitting_room" : "add_to_fitting_room");
+  return /* @__PURE__ */ jsx$1("button", { type: "button", onClick: handleClick, css: [css2.button, isInFittingRoom && css2.buttonAdded, "", ""], "aria-label": ariaLabel, "aria-pressed": isInFittingRoom, children: /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: [css2.icon, isInFittingRoom && css2.iconAdded, "", ""] }) });
+}
+const logger$4 = getLogger("widgets/add-to-fitting-room");
+function AddToFittingRoomWidget({
+  attributes
+}) {
+  const {
+    currentProduct
+  } = getStaticData();
+  const attrProductId = attributes["product-id"];
+  const productId = attrProductId || currentProduct?.externalId || null;
+  const isPdp = productId != null && productId === currentProduct?.externalId;
+  const isInFittingRoom = useMainStore((state) => productId == null ? false : state.fittingRoom.some((item) => item.externalId === productId));
+  const css2 = useCss((theme) => ({
+    button: {
+      marginTop: "10px",
+      marginBottom: "10px",
+      width: "100%",
+      maxWidth: "440px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "10px",
+      padding: "13px",
+      backgroundColor: "white",
+      borderWidth: "1px",
+      borderColor: theme.color_fg_text,
+      borderStyle: "solid",
+      borderRadius: "30px",
+      cursor: "pointer"
+    },
+    icon: {
+      color: theme.color_fg_text,
+      width: "20px",
+      height: "20px"
+    },
+    text: {
+      fontSize: "14px",
+      textTransform: "uppercase"
+    }
+  }));
+  if (productId == null) {
+    return null;
+  }
+  const handleClick = () => {
+    toggleFittingRoomItem(productId, isPdp).catch((error) => {
+      logger$4.logError("toggleFittingRoomItem failed", {
+        error
+      });
+    });
+  };
+  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleClick, css: css2.button, children: [
+    /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: css2.icon }),
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: isInFittingRoom ? "added_to_fitting_room" : "add_to_fitting_room" })
+  ] });
+}
+const logger$3 = getLogger("widgets/fitting-room-icon");
+function FittingRoomIconWidget({}) {
+  const {
+    t
+  } = useTranslation();
+  const count = useMainStore((state) => state.fittingRoom.length);
+  const isOpen = useMainStore((state) => state.activeOverlay === OverlayName.FITTING_ROOM);
+  const openOverlay = useMainStore((state) => state.openOverlay);
+  const closeOverlay = useMainStore((state) => state.closeOverlay);
+  const css2 = useCss((theme) => ({
+    button: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "44px",
+      height: "44px",
+      padding: 0,
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      color: "inherit"
+    },
+    icon: {
+      width: "24px",
+      height: "24px",
+      color: theme.color_fg_text
+    },
+    badge: {
+      position: "absolute",
+      top: "4px",
+      right: "4px",
+      minWidth: "18px",
+      height: "18px",
+      padding: "0 5px",
+      borderRadius: "9px",
+      backgroundColor: theme.color_fg_text,
+      color: "#FFFFFF",
+      fontSize: "11px",
+      fontWeight: "bold",
+      lineHeight: "18px",
+      textAlign: "center"
+    }
+  }));
+  const handleClick = () => {
+    if (isOpen) {
+      logger$3.logDebug("{{ts}} - Closing fitting room overlay", {
+        count
+      });
+      closeOverlay();
       return;
     }
-    async function fetchSizeRec() {
-      const {
-        brandId,
-        currentProduct
-      } = getStaticData();
-      try {
-        setRecord(null);
-        setIsLoading(true);
-        setError(null);
-        const style = await getStyleByExternalId(brandId, currentProduct.externalId);
-        if (!style) {
-          throw new Error("Style not found");
-        }
-        const sizeRecommendationRecord = await getSizeRecommendation(style.id);
-        setRecord(sizeRecommendationRecord);
-      } catch (error2) {
-        setError(error2);
-      } finally {
-        setIsLoading(false);
-      }
+    logger$3.logDebug("{{ts}} - Opening fitting room overlay", {
+      count
+    });
+    openOverlay(OverlayName.FITTING_ROOM);
+  };
+  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleClick, css: css2.button, "aria-label": t("view_fitting_room"), children: [
+    /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: css2.icon }),
+    count > 0 && /* @__PURE__ */ jsx$1("span", { css: css2.badge, children: count })
+  ] });
+}
+const logger$2 = getLogger("widgets/fitting-room");
+function FittingRoomWidget({}) {
+  const count = useMainStore((state) => state.fittingRoom.length);
+  const openOverlay = useMainStore((state) => state.openOverlay);
+  const css2 = useCss((theme) => ({
+    button: {
+      marginTop: "10px",
+      marginBottom: "10px",
+      width: "100%",
+      maxWidth: "440px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "10px",
+      padding: "13px",
+      backgroundColor: "white",
+      borderWidth: "1px",
+      borderColor: theme.color_fg_text,
+      borderStyle: "solid",
+      borderRadius: "30px",
+      cursor: "pointer"
+    },
+    icon: {
+      color: theme.color_fg_text,
+      width: "20px",
+      height: "20px"
+    },
+    text: {
+      fontSize: "14px",
+      textTransform: "uppercase"
+    },
+    badge: {
+      fontSize: "14px",
+      fontWeight: "bold",
+      minWidth: "22px",
+      height: "22px",
+      padding: "0 6px",
+      borderRadius: "11px",
+      backgroundColor: theme.color_fg_text,
+      color: "#FFFFFF",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
     }
-    fetchSizeRec();
-  }, [load, userHasAvatar]);
-  return {
-    record,
-    isLoading,
-    error
+  }));
+  const handleClick = () => {
+    logger$2.logDebug("{{ts}} - Opening fitting room overlay", {
+      count
+    });
+    openOverlay(OverlayName.FITTING_ROOM);
   };
+  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleClick, css: css2.button, children: [
+    /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: css2.icon }),
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: "view_fitting_room" }),
+    count > 0 && /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.badge, children: count })
+  ] });
 }
 const logger$1 = getLogger("size-rec");
 function SizeRecWidget({}) {
   const openOverlay = useMainStore((state) => state.openOverlay);
   const openedOverlays = useMainStore((state) => state.openedOverlays);
+  const storeProductData = useMainStore((state) => state.productData);
   const hasOpenedVtoSingleOverlay = openedOverlays.includes(OverlayName.VTO_SINGLE);
-  const {
-    record: sizeRecommendationRecord,
-    error: sizeRecommendationError
-  } = useSizeRecommendation(hasOpenedVtoSingleOverlay);
-  reactExports.useEffect(() => {
-    if (sizeRecommendationError) {
+  const sizeRecommendationRecord = reactExports.useMemo(() => {
+    const {
+      currentProduct
+    } = getStaticData();
+    if (!currentProduct) {
+      return null;
+    }
+    const {
+      externalId
+    } = currentProduct;
+    const productData = storeProductData[externalId];
+    if (!productData) {
+      return null;
+    }
+    if ("error" in productData) {
       logger$1.logError("Error loading size recommendation:", {
-        error: sizeRecommendationError
+        error: productData.error
       });
+      return null;
     }
-  }, [sizeRecommendationError]);
+    return productData.sizeFitRecommendation || null;
+  }, [storeProductData]);
   const handleLinkClick = reactExports.useCallback(() => {
     openOverlay(OverlayName.VTO_SINGLE);
-  }, []);
+  }, [openOverlay]);
   if (!sizeRecommendationRecord || !hasOpenedVtoSingleOverlay) {
     return null;
   }
@@ -43315,6 +43883,22 @@ function _init$1() {
   });
 }
 const WIDGETS = {
+  [
+    "add-to-fitting-room"
+    /* ADD_TO_FITTING_ROOM */
+  ]: AddToFittingRoomWidget,
+  [
+    "add-to-fitting-room-compact"
+    /* ADD_TO_FITTING_ROOM_COMPACT */
+  ]: AddToFittingRoomCompactWidget,
+  [
+    "fitting-room"
+    /* FITTING_ROOM */
+  ]: FittingRoomWidget,
+  [
+    "fitting-room-icon"
+    /* FITTING_ROOM_ICON */
+  ]: FittingRoomIconWidget,
   [
     "size-rec"
     /* SIZE_REC */
@@ -43325,6 +43909,7 @@ const WIDGETS = {
   ]: VtoButtonWidget
 };
 var OverlayName = /* @__PURE__ */ ((OverlayName2) => {
+  OverlayName2["FITTING_ROOM"] = "fitting-room";
   OverlayName2["FORGOT_PASSWORD"] = "forgot-password";
   OverlayName2["GET_APP"] = "get-app";
   OverlayName2["LANDING"] = "landing";
@@ -43333,6 +43918,10 @@ var OverlayName = /* @__PURE__ */ ((OverlayName2) => {
   return OverlayName2;
 })(OverlayName || {});
 const OVERLAYS = {
+  [
+    "fitting-room"
+    /* FITTING_ROOM */
+  ]: FittingRoomOverlay,
   [
     "forgot-password"
     /* FORGOT_PASSWORD */
@@ -43392,6 +43981,47 @@ const useMainStore = create((set) => ({
       userHasAvatar
     });
   },
+  // Product data:
+  productData: {},
+  setProductData: (externalId, data) => set((prevState) => ({
+    productData: {
+      ...prevState.productData,
+      [externalId]: data
+    }
+  })),
+  // Fitting room:
+  fittingRoom: [],
+  addToFittingRoom: (item) => set((prevState) => {
+    const filtered = prevState.fittingRoom.filter((existing) => existing.externalId !== item.externalId);
+    const next2 = [...filtered, item];
+    writeFittingRoom(getStaticData().brandId, next2);
+    return {
+      fittingRoom: next2
+    };
+  }),
+  removeFromFittingRoom: (externalId) => set((prevState) => {
+    const next2 = prevState.fittingRoom.filter((existing) => existing.externalId !== externalId);
+    writeFittingRoom(getStaticData().brandId, next2);
+    return {
+      fittingRoom: next2
+    };
+  }),
+  updateFittingRoomItem: (externalId, patch) => set((prevState) => {
+    const next2 = prevState.fittingRoom.map((existing) => existing.externalId === externalId ? {
+      ...existing,
+      ...patch
+    } : existing);
+    writeFittingRoom(getStaticData().brandId, next2);
+    return {
+      fittingRoom: next2
+    };
+  }),
+  clearFittingRoom: () => set(() => {
+    writeFittingRoom(getStaticData().brandId, []);
+    return {
+      fittingRoom: []
+    };
+  }),
   // UI state:
   activeOverlay: null,
   activeOverlayProps: null,
@@ -43438,6 +44068,7 @@ function Widget({
 var EnvName = /* @__PURE__ */ ((EnvName2) => {
   EnvName2["DEVELOPMENT"] = "development";
   EnvName2["PRODUCTION"] = "production";
+  EnvName2["LOCAL"] = "local";
   return EnvName2;
 })(EnvName || {});
 const SHARED_CONFIG = {
@@ -43446,9 +44077,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.11"}`,
-    commitHash: `${"77ac921"}`,
-    date: `${"2026-02-02T01:20:02.888Z"}`
+    version: `${"5.0.17"}`,
+    commitHash: `${"edbce9b"}`,
+    date: `${"2026-05-10T18:19:05.275Z"}`
   }
 };
 const CONFIGS = {
@@ -43471,6 +44102,9 @@ const CONFIGS = {
     asset: {
       baseUrl: "https://assets.dev.thefittingroom.xyz/shop-sdk/assets/v5"
     },
+    frames: {
+      baseUrl: "https://assets.dev.thefittingroom.xyz"
+    },
     ...SHARED_CONFIG
   },
   [
@@ -43492,6 +44126,33 @@ const CONFIGS = {
     asset: {
       baseUrl: "https://assets.p.thefittingroom.xyz/shop-sdk/assets/v5"
     },
+    frames: {
+      baseUrl: "https://assets.p.thefittingroom.xyz"
+    },
+    ...SHARED_CONFIG
+  },
+  [
+    "local"
+    /* LOCAL */
+  ]: {
+    firebase: {
+      apiKey: "AIzaSyDfjBWzpmzb-mhGN8VSURxzLg6nkzmKUD8",
+      authDomain: "fittingroom-dev-5d248.firebaseapp.com",
+      projectId: "fittingroom-dev-5d248",
+      storageBucket: "fittingroom-dev-5d248.appspot.com",
+      messagingSenderId: "2298664147",
+      appId: "1:2298664147:web:340bda75cd5d25f3997026",
+      measurementId: "G-B7GDQ1Y9LL"
+    },
+    api: {
+      baseUrl: "http://localhost:8080"
+    },
+    asset: {
+      baseUrl: "http://localhost:9000/tfr-assets-dev/shop-sdk/assets/v5"
+    },
+    frames: {
+      baseUrl: "http://localhost:9000/tfr-assets-dev"
+    },
     ...SHARED_CONFIG
   }
 };
@@ -43518,18 +44179,20 @@ async function init(initParams) {
       environment,
       lang = null,
       theme = null,
-      debug
+      debug,
+      productLookup,
+      getOverlayTopOffset
     } = initParams;
     if (!brandId || typeof brandId !== "number" || isNaN(brandId) || brandId <= 0) {
       throw new Error(`Invalid brandId "${brandId}"`);
     }
-    if (!currentProduct || typeof currentProduct.externalId !== "string") {
+    if (currentProduct !== void 0 && typeof currentProduct.externalId !== "string") {
       throw new Error("Invalid currentProduct");
     }
     if (!Object.values(EnvName).includes(environment)) {
       throw new Error(`Invalid environment "${environment}"`);
     }
-    _init$4(debug);
+    _init$8(debug);
     logger2.logDebug("Starting SDK initialization:", {
       initParams
     });
@@ -43539,14 +44202,17 @@ async function init(initParams) {
     }
     _init({
       brandId,
-      currentProduct,
+      currentProduct: currentProduct ?? null,
       environment,
-      config
+      config,
+      productLookup: productLookup ?? null,
+      getOverlayTopOffset: getOverlayTopOffset ?? null
     });
+    _init$7();
     _init$5();
     _init$6(theme);
     _init$1();
-    await _init$3();
+    await _init$4();
     const authManager2 = getAuthManager();
     authManager2.addAuthStateChangeListener((authUser) => {
       useMainStore.getState().setAuthUser(authUser);
@@ -43554,6 +44220,7 @@ async function init(initParams) {
     authManager2.addUserProfileChangeListener((userProfile) => {
       useMainStore.getState().setUserProfile(userProfile);
     });
+    _init$3();
     _init$2();
     {
       const styleEl = document.createElement("style");