@thefittingroom/shop-ui 5.0.24 → 5.0.26

package/README.md

@@ -18,13 +18,30 @@ npm ci
 | Script | What it does |
 |---|---|
 | `npm run build` | Clean + production build into `dist/` |
-| `npm run check` | Type-check (`tsc --noEmit`) |
+| `npm run check` | Type-check (`tsc --noEmit`) + ESLint + Prettier |
 | `npm run watch` | Vite build in watch mode |
 | `npm run serve` | Static-serve the repo on `:5173` with CORS |
 | `npm run watch-serve` | Both `watch` and `serve` together; Ctrl+C stops both |
+| `npm run test` / `npm run test:e2e` | Playwright e2e suite (Chromium) against the built bundle |
+| `npm run test:e2e:ui` | Playwright UI runner for local debugging |
 | `npm run gen-types` | Regenerate `src/api/gen/*.ts` from `tfr-backend` Go types |
 | `npm run promote-latest [version]` | Move npm dist-tag `latest` onto a published version (defaults to current `package.json` version) |
 
+## Running e2e tests
+
+First-time setup: `npm install && npx playwright install chromium` (the
+second command downloads the Chromium binary once; cached afterwards). Then
+`npm run test:e2e` runs the suite. Specs live under `tests/e2e/`; they boot
+the built bundle in headless Chromium against a static fixture page
+(`tests/e2e/fixtures/host.html`) that mimics the minimal contract the Shopify
+theme provides. Firebase is mocked via `InitParams.testHooks`
+(see `src/lib/firebase-mock.ts`); REST endpoints are mocked via
+`page.route()`. See AGENTS.md for the architecture and constraints.
+
+For an interactive debug loop, `npm run watch-serve &` in one terminal and
+`npm run test:e2e:ui` in another — Playwright reuses the live-rebuilt
+`:5173`.
+
 ## Release process
 
 Releases are explicit, human-initiated steps via a single GitHub Actions

package/dist/index.js

@@ -14054,7 +14054,7 @@ function applyFrameBaseUrl(url, baseUrl2) {
   return `${cleanBase}${url.startsWith("/") ? "" : "/"}${url}`;
 }
 const STORAGE_KEY = "tfr:fitting-room:v1";
-const logger$f = getLogger("fitting-room-storage");
+const logger$g = getLogger("fitting-room-storage");
 function readAll() {
   try {
     const raw = window.localStorage.getItem(STORAGE_KEY);
@@ -14067,7 +14067,7 @@ function readAll() {
     }
     return parsed;
   } catch (error) {
-    logger$f.logWarn("Failed to read fitting room from localStorage", {
+    logger$g.logWarn("Failed to read fitting room from localStorage", {
       error
     });
     return {};
@@ -14077,7 +14077,7 @@ function writeAll(all) {
   try {
     window.localStorage.setItem(STORAGE_KEY, JSON.stringify(all));
   } catch (error) {
-    logger$f.logWarn("Failed to write fitting room to localStorage", {
+    logger$g.logWarn("Failed to write fitting room to localStorage", {
       error
     });
   }
@@ -14103,7 +14103,7 @@ function _init$7() {
 }
 async function addFittingRoomItem(productId, handle, isPdp) {
   const state = useMainStore.getState();
-  logger$f.logDebug("{{ts}} - Adding to fitting room", {
+  logger$g.logDebug("{{ts}} - Adding to fitting room", {
     productId,
     handle,
     isPdp
@@ -14125,7 +14125,7 @@ async function addFittingRoomItem(productId, handle, isPdp) {
         size = selection.size || null;
         color = selection.color;
       } catch (error) {
-        logger$f.logWarn("Failed to read selected options from currentProduct", {
+        logger$g.logWarn("Failed to read selected options from currentProduct", {
           error
         });
       }
@@ -14157,7 +14157,7 @@ async function toggleFittingRoomItem(productId, handle, isPdp) {
   const state = useMainStore.getState();
   const isInFittingRoom = state.fittingRoom.some((item) => item.externalId === productId);
   if (isInFittingRoom) {
-    logger$f.logDebug("{{ts}} - Removing from fitting room", {
+    logger$g.logDebug("{{ts}} - Removing from fitting room", {
       productId
     });
     state.removeFromFittingRoom(productId);
@@ -23058,7 +23058,7 @@ function isVersionServiceProvider(provider) {
 }
 const name$q = "@firebase/app";
 const version$1$1 = "0.14.5";
-const logger$e = new Logger3("@firebase/app");
+const logger$f = new Logger3("@firebase/app");
 const name$p = "@firebase/app-compat";
 const name$o = "@firebase/analytics-compat";
 const name$n = "@firebase/analytics";
@@ -23125,13 +23125,13 @@ function _addComponent(app, component) {
   try {
     app.container.addComponent(component);
   } catch (e) {
-    logger$e.debug(`Component ${component.name} failed to register with FirebaseApp ${app.name}`, e);
+    logger$f.debug(`Component ${component.name} failed to register with FirebaseApp ${app.name}`, e);
   }
 }
 function _registerComponent(component) {
   const componentName = component.name;
   if (_components.has(componentName)) {
-    logger$e.debug(`There were multiple attempts to register component ${componentName}.`);
+    logger$f.debug(`There were multiple attempts to register component ${componentName}.`);
     return false;
   }
   _components.set(componentName, component);
@@ -23340,7 +23340,7 @@ function registerVersion(libraryKeyOrName, version2, variant) {
     if (versionMismatch) {
       warning.push(`version name "${version2}" contains illegal characters (whitespace or "/")`);
     }
-    logger$e.warn(warning.join(" "));
+    logger$f.warn(warning.join(" "));
     return;
   }
   _registerComponent(new Component(
@@ -23384,12 +23384,12 @@ async function readHeartbeatsFromIndexedDB(app) {
     return result;
   } catch (e) {
     if (e instanceof FirebaseError) {
-      logger$e.warn(e.message);
+      logger$f.warn(e.message);
     } else {
       const idbGetError = ERROR_FACTORY.create("idb-get", {
         originalErrorMessage: e?.message
       });
-      logger$e.warn(idbGetError.message);
+      logger$f.warn(idbGetError.message);
     }
   }
 }
@@ -23402,12 +23402,12 @@ async function writeHeartbeatsToIndexedDB(app, heartbeatObject) {
     await tx.done;
   } catch (e) {
     if (e instanceof FirebaseError) {
-      logger$e.warn(e.message);
+      logger$f.warn(e.message);
     } else {
       const idbGetError = ERROR_FACTORY.create("idb-set", {
         originalErrorMessage: e?.message
       });
-      logger$e.warn(idbGetError.message);
+      logger$f.warn(idbGetError.message);
     }
   }
 }
@@ -23456,7 +23456,7 @@ class HeartbeatServiceImpl {
       }
       return this._storage.overwrite(this._heartbeatsCache);
     } catch (e) {
-      logger$e.warn(e);
+      logger$f.warn(e);
     }
   }
   /**
@@ -23487,7 +23487,7 @@ class HeartbeatServiceImpl {
       }
       return headerString;
     } catch (e) {
-      logger$e.warn(e);
+      logger$f.warn(e);
       return "";
     }
   }
@@ -41051,6 +41051,143 @@ registerAuth(
   "Browser"
   /* ClientPlatform.BROWSER */
 );
+const logger$e = getLogger("firebase-mock");
+class MockFirestoreManager {
+  constructor(seedDocs = {}) {
+    const cloned = {};
+    for (const [coll, byId] of Object.entries(seedDocs)) {
+      cloned[coll] = {
+        ...byId
+      };
+    }
+    this.docs = cloned;
+  }
+  async getDocData(collectionName, docId) {
+    const doc2 = this.docs[collectionName]?.[docId];
+    return doc2 ?? null;
+  }
+  async setDocData(collectionName, docId, data) {
+    if (!this.docs[collectionName]) {
+      this.docs[collectionName] = {};
+    }
+    this.docs[collectionName][docId] = data;
+  }
+  async mergeDocData(collectionName, docId, data) {
+    if (!this.docs[collectionName]) {
+      this.docs[collectionName] = {};
+    }
+    const existing = this.docs[collectionName][docId] ?? {};
+    this.docs[collectionName][docId] = {
+      ...existing,
+      ...data
+    };
+  }
+  listenToDoc(collectionName, docId, callback) {
+    const doc2 = this.docs[collectionName]?.[docId];
+    callback(doc2 ?? null);
+    return () => {
+    };
+  }
+  async queryDocs(collectionName, _constraints) {
+    const entries = Object.values(this.docs[collectionName] ?? {});
+    const docs = entries.map((data) => ({
+      data: () => data
+    }));
+    const snapshot = {
+      empty: docs.length === 0,
+      docs,
+      forEach: (cb) => docs.forEach(cb)
+    };
+    return snapshot;
+  }
+}
+function makeMockAuthUser(seed) {
+  const fake = {
+    uid: seed.uid,
+    email: seed.email,
+    getIdToken: async (_forceRefresh) => seed.idToken
+  };
+  return fake;
+}
+class MockAuthManager {
+  constructor(seed, firestore) {
+    this.userProfile = null;
+    this.authStateChangeListeners = /* @__PURE__ */ new Set();
+    this.userProfileChangeListeners = /* @__PURE__ */ new Set();
+    this.profileUnsub = null;
+    this.seed = seed;
+    this.currentUser = seed ? makeMockAuthUser(seed) : null;
+    this.firestore = firestore;
+    this.addAuthStateChangeListener((authUser) => this.handleAuthStateChanged(authUser));
+  }
+  addAuthStateChangeListener(callback) {
+    this.authStateChangeListeners.add(callback);
+    callback(this.currentUser);
+    return () => {
+      this.authStateChangeListeners.delete(callback);
+    };
+  }
+  removeAuthStateChangeListener(callback) {
+    this.authStateChangeListeners.delete(callback);
+  }
+  addUserProfileChangeListener(callback) {
+    this.userProfileChangeListeners.add(callback);
+    callback(this.userProfile);
+    return () => {
+      this.userProfileChangeListeners.delete(callback);
+    };
+  }
+  removeUserProfileChangeListener(callback) {
+    this.userProfileChangeListeners.delete(callback);
+  }
+  getAuthUser() {
+    return this.currentUser;
+  }
+  async getAuthToken(_forceRefresh = false) {
+    if (!this.currentUser || !this.seed) {
+      throw new Error("No authenticated user");
+    }
+    return this.seed.idToken;
+  }
+  async getUserProfile(_forceRefresh = false) {
+    return this.userProfile;
+  }
+  async login(_email, _password) {
+    throw new Error("MockAuthManager.login is not supported — seed the user via InitParams.testHooks.auth");
+  }
+  async logout() {
+    if (this.profileUnsub) {
+      this.profileUnsub();
+      this.profileUnsub = null;
+    }
+    this.currentUser = null;
+    this.userProfile = null;
+    this.authStateChangeListeners.forEach((cb) => cb(null));
+    this.userProfileChangeListeners.forEach((cb) => cb(null));
+  }
+  async sendPasswordResetEmail(_email) {
+  }
+  async confirmPasswordReset(_code, _newPassword) {
+  }
+  handleAuthStateChanged(authUser) {
+    if (this.profileUnsub) {
+      this.profileUnsub();
+      this.profileUnsub = null;
+    }
+    if (authUser) {
+      logger$e.logDebug("Mock user logged in:", {
+        uid: authUser.uid
+      });
+      this.profileUnsub = this.firestore.listenToDoc("users", authUser.uid, (profile) => {
+        this.userProfile = profile;
+        this.userProfileChangeListeners.forEach((cb) => cb(this.userProfile));
+      });
+    } else {
+      this.userProfile = null;
+      this.userProfileChangeListeners.forEach((cb) => cb(null));
+    }
+  }
+}
 const firebaseDateToDayjs = (date) => {
   return dayjs(date.seconds * 1e3);
 };
@@ -41238,8 +41375,24 @@ function getAuthManager() {
 async function _init$4() {
   const {
     brandId,
-    config
+    config,
+    testHooks
   } = getStaticData();
+  if (testHooks !== void 0) {
+    const seedDocs = {
+      ...testHooks.firestore?.docs ?? {}
+    };
+    if (testHooks.auth?.profile) {
+      seedDocs.users = {
+        ...seedDocs.users ?? {},
+        [testHooks.auth.uid]: testHooks.auth.profile
+      };
+    }
+    firestoreManager = new MockFirestoreManager(seedDocs);
+    authManager = new MockAuthManager(testHooks.auth ?? null, firestoreManager);
+    logger$d.logDebug("Firebase initialized in MOCK mode (testHooks present)");
+    return;
+  }
   {
     const {
       firebase: sdkFirebaseConfig
@@ -42644,6 +42797,35 @@ function AddToCartButton({
 }) {
   return /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "quick-view.add_to_cart", onClick });
 }
+function ColorSelector({
+  availableColorLabels,
+  selectedColorLabel,
+  onChangeColor
+}) {
+  const css2 = useCss((theme) => ({
+    colorContainer: {},
+    colorLabelText: {
+      fontSize: "12px"
+    },
+    colorSelect: {
+      border: "none",
+      color: theme.color_fg_text,
+      fontFamily: theme.font_family,
+      fontSize: "12px"
+    }
+  }));
+  const handleColorSelectChange = reactExports.useCallback((e) => {
+    const newColorLabel = e.target.value || null;
+    onChangeColor(newColorLabel);
+  }, [onChangeColor]);
+  if (availableColorLabels.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.colorLabelText, t: "quick-view.color_label" }),
+    /* @__PURE__ */ jsx$1("select", { value: selectedColorLabel ?? "", onChange: handleColorSelectChange, css: css2.colorSelect, children: availableColorLabels.map((colorLabel) => /* @__PURE__ */ jsx$1("option", { value: colorLabel, children: colorLabel }, colorLabel)) })
+  ] }) });
+}
 function ItemFitDetails({
   loadedProductData,
   selectedSizeLabel
@@ -42693,7 +42875,7 @@ function ItemFitDetails({
         ] }) : fitLabel })
       ] }, index);
     });
-  }, [loadedProductData, selectedSizeLabel]);
+  }, [loadedProductData, selectedSizeLabel, t, css2.detailCell, css2.firstLine, css2.line]);
   return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: fitLineNodeList });
 }
 function ItemFitText({
@@ -42740,7 +42922,7 @@ function SizeSelector({
       }
       onChangeSize(sizeRecord.sizeLabel);
     }, children: sizeRecord.sizeLabel }, sizeRecord.sizeLabel);
-  }), [loadedProductData.sizes, selectedSizeLabel, onChangeSize]);
+  }), [loadedProductData.sizes, selectedSizeLabel, onChangeSize, css2.button, css2.selectedButton]);
   return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: sizeSelectorNodeList });
 }
 function DetailAccordionItem({
@@ -42754,6 +42936,7 @@ function DetailAccordionItem({
   onToggleOpen,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
@@ -42789,13 +42972,23 @@ function DetailAccordionItem({
     }
     return null;
   }, [productData, item.storage.colorwaySizeAssetId]);
+  const availableColorLabels = reactExports.useMemo(() => {
+    if (!productData || !selectedSizeLabel) {
+      return [];
+    }
+    const sizeRec = productData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
+    if (!sizeRec) {
+      return [];
+    }
+    return sizeRec.colors.map((c) => c.colorLabel).filter((label) => !!label);
+  }, [productData, selectedSizeLabel]);
   const categoryLabel = item.styleCategory?.label_singular ?? item.styleCategory?.label ?? "";
   const productName = item.merchantProduct?.productName ?? item.externalId;
   const tuckable = !!item.styleCategory?.tuckable && canTuck;
   if (platform === "desktop") {
-    return /* @__PURE__ */ jsx$1(DesktopAccordionItem, { isOpen, categoryLabel, productData, currentPrice, selectedSizeLabel, onToggleOpen, onChangeSize, onAddToCart });
+    return /* @__PURE__ */ jsx$1(DesktopAccordionItem, { isOpen, categoryLabel, productData, currentPrice, selectedSizeLabel, availableColorLabels, selectedColorLabel: item.storage.color, onToggleOpen, onChangeSize, onChangeColor, onAddToCart });
   }
-  return /* @__PURE__ */ jsx$1(MobileAccordionItem, { isOpen, categoryLabel, productName, productData, selectedSizeLabel, currentPrice, detailMode, isMobileQuickRow, tuckable, forceUntuck, onToggleOpen, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
+  return /* @__PURE__ */ jsx$1(MobileAccordionItem, { isOpen, categoryLabel, productName, productData, selectedSizeLabel, availableColorLabels, selectedColorLabel: item.storage.color, currentPrice, detailMode, isMobileQuickRow, tuckable, forceUntuck, onToggleOpen, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck });
 }
 function DesktopAccordionItem({
   isOpen,
@@ -42803,8 +42996,11 @@ function DesktopAccordionItem({
   productData,
   currentPrice,
   selectedSizeLabel,
+  availableColorLabels,
+  selectedColorLabel,
   onToggleOpen,
   onChangeSize,
+  onChangeColor,
   onAddToCart
 }) {
   const ACCORDION_SHADE = "#F4F4F4";
@@ -42823,8 +43019,10 @@ function DesktopAccordionItem({
       backgroundColor: ACCORDION_SHADE
     },
     categoryLabel: {
-      fontSize: "16px",
-      fontWeight: "400"
+      fontFamily: "'Times New Roman', serif",
+      fontSize: "20px",
+      fontWeight: "400",
+      letterSpacing: "0.04em"
     },
     chevron: {
       display: "inline-flex",
@@ -42845,40 +43043,72 @@ function DesktopAccordionItem({
     },
     productName: {
       fontSize: "24px",
+      fontWeight: "300",
       lineHeight: "1.2"
     },
     price: {
       fontSize: "15px"
     },
+    // Padding matches quick-view's sizeRecommendationFrame (32px / 56px) so
+    // the "fit box" feels visually consistent between the two overlays.
+    //
+    // No flex `gap` — the three text lines (recommended size, fit text,
+    // select-a-size prompt) sit tight against each other (matching
+    // quick-view), with explicit marginTop on the size selector + fit
+    // details below them to introduce the larger break.
     sizeBox: {
       width: "100%",
       border: `1px solid ${theme.color_fg_text}`,
-      padding: "20px 24px",
+      padding: "32px 56px",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      gap: "12px",
       marginTop: "8px",
       textAlign: "center"
     },
+    colorSelectorContainer: {
+      width: "100%",
+      marginTop: "8px"
+    },
+    // 14px / line-height 1.5 on these three text lines matches quick-view's
+    // fit-box. Quick-view's first line wraps an InfoIcon button alongside
+    // the recommended-size text, which stretches that line vertically; the
+    // simpler line-height bump here matches the *visual* line spacing
+    // without dragging the icon in. The two lines below it inherit
+    // line-height from their containers in quick-view, which the host page's
+    // body styles tend to set looser than Inter's intrinsic `normal` (~1.21).
     recommendedSize: {
-      fontSize: "13px",
-      fontWeight: "600"
+      fontSize: "14px",
+      fontWeight: "600",
+      lineHeight: 1.5
     },
     selectPrompt: {
-      fontSize: "12px"
+      fontSize: "14px",
+      fontWeight: "300",
+      lineHeight: 1.5
     },
     fitText: {
-      fontSize: "12px"
+      fontSize: "14px",
+      fontWeight: "300",
+      lineHeight: 1.5,
+      // Tight 8px lift to the recommended-size line above; matches
+      // quick-view's `itemFitContainer` marginTop.
+      marginTop: "8px"
     },
     fitDetails: {
-      width: "100%"
+      width: "100%",
+      // Cascades to the text inside <ItemFitDetails>; the size-selector
+      // buttons and the bold recommended-size line above stay at their
+      // own weights.
+      fontWeight: 300,
+      marginTop: "24px"
     },
     sizeRow: {
       display: "flex",
       gap: "8px",
       alignItems: "center",
-      justifyContent: "center"
+      justifyContent: "center",
+      marginTop: "24px"
     },
     cartContainer: {
       width: "100%",
@@ -42899,6 +43129,7 @@ function DesktopAccordionItem({
     !isOpen ? null : /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.productName, children: productData.productName }),
       currentPrice ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.price, children: currentPrice }) : null,
+      /* @__PURE__ */ jsx$1("div", { css: css2.colorSelectorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
       /* @__PURE__ */ jsxs("div", { css: css2.sizeBox, children: [
         /* @__PURE__ */ jsxs(Text, { variant: "base", css: css2.recommendedSize, children: [
           "Recommended Size: ",
@@ -42922,6 +43153,8 @@ function MobileAccordionItem({
   productName,
   productData,
   selectedSizeLabel,
+  availableColorLabels,
+  selectedColorLabel,
   currentPrice,
   detailMode,
   isMobileQuickRow,
@@ -42930,6 +43163,7 @@ function MobileAccordionItem({
   onToggleOpen,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
@@ -42962,12 +43196,16 @@ function MobileAccordionItem({
       minWidth: 0
     },
     categoryLabel: {
-      fontSize: "15px",
+      fontFamily: "'Times New Roman', serif",
+      fontSize: "16px",
       fontWeight: "400",
+      letterSpacing: "0.04em",
       flex: "none"
     },
     productName: {
-      fontSize: "15px",
+      fontFamily: "'Times New Roman', serif",
+      fontSize: "16px",
+      letterSpacing: "0.04em",
       color: "#8A8A8A",
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -43069,6 +43307,7 @@ function MobileAccordionItem({
     ] }),
     isMobileQuickRow ? /* @__PURE__ */ jsx$1("div", { css: css2.content, children: /* @__PURE__ */ jsx$1("div", { css: css2.quickRow, children: productData ? /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) : null }) }) : !isOpen ? null : /* @__PURE__ */ jsx$1("div", { css: css2.content, children: /* @__PURE__ */ jsx$1("div", { css: css2.body, children: productData ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx$1("div", { css: css2.sizeRow, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData: productData, selectedSizeLabel, onChangeSize }) }),
+      /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }),
       /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData: productData }),
       /* @__PURE__ */ jsx$1("div", { css: css2.fitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData: productData, selectedSizeLabel }) }),
       /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
@@ -43095,6 +43334,7 @@ function DetailAccordion({
   onOpenItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
@@ -43109,9 +43349,11 @@ function DetailAccordion({
     gap
   }, children: items.map((item) => {
     const isOpen = openItemExternalId === item.externalId;
-    return /* @__PURE__ */ jsx$1(DetailAccordionItem, { item, isOpen, platform, detailMode, isMobileQuickRow, forceUntuck, canTuck, onToggleOpen: () => onOpenItem(isOpen ? null : item.externalId), onChangeDetailMode, onChangeSize: (label) => onChangeSize(item.externalId, label), onAddToCart: () => onAddToCart(item.externalId), onToggleUntuck }, item.externalId);
+    return /* @__PURE__ */ jsx$1(DetailAccordionItem, { item, isOpen, platform, detailMode, isMobileQuickRow, forceUntuck, canTuck, onToggleOpen: () => onOpenItem(isOpen ? null : item.externalId), onChangeDetailMode, onChangeSize: (label) => onChangeSize(item.externalId, label), onChangeColor: (label) => onChangeColor(item.externalId, label), onAddToCart: () => onAddToCart(item.externalId), onToggleUntuck }, item.externalId);
   }) });
 }
+const AXIS_LOCK_PX = 8;
+const ROTATE_STEP_PX = 50;
 function ZoomModal({
   frameUrls,
   selectedFrameIndex,
@@ -43131,10 +43373,50 @@ function ZoomModal({
   }, [onClose]);
   const {
     rotateLeft,
-    rotateRight,
-    handleMouseDragStart,
-    handleTouchDragStart
+    rotateRight
   } = useFrameRotation(frameUrls, setSelectedFrameIndex);
+  const scrollAreaRef = reactExports.useRef(null);
+  const handleImageMouseDown = reactExports.useCallback((e) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const scrollArea = scrollAreaRef.current;
+    const startScrollTop = scrollArea?.scrollTop ?? 0;
+    let mode = "unknown";
+    let lastRotateX = startX;
+    const onMove = (move) => {
+      const deltaX = move.clientX - startX;
+      const deltaY = move.clientY - startY;
+      if (mode === "unknown") {
+        const absX = Math.abs(deltaX);
+        const absY = Math.abs(deltaY);
+        if (absX < AXIS_LOCK_PX && absY < AXIS_LOCK_PX) {
+          return;
+        }
+        mode = absY > absX ? "scroll" : "rotate";
+        lastRotateX = move.clientX;
+      }
+      if (mode === "scroll" && scrollArea) {
+        scrollArea.scrollTop = startScrollTop - deltaY;
+      } else if (mode === "rotate") {
+        const rotateDelta = move.clientX - lastRotateX;
+        if (Math.abs(rotateDelta) >= ROTATE_STEP_PX) {
+          if (rotateDelta > 0) {
+            rotateRight();
+          } else {
+            rotateLeft();
+          }
+          lastRotateX = move.clientX;
+        }
+      }
+    };
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }, [rotateLeft, rotateRight]);
   const css2 = useCss((_theme) => ({
     backdrop: {
       position: "fixed",
@@ -43213,7 +43495,7 @@ function ZoomModal({
   }));
   const imageUrl = frameUrls[selectedFrameIndex ?? 0];
   return /* @__PURE__ */ jsxs("div", { css: css2.backdrop, children: [
-    /* @__PURE__ */ jsx$1("div", { css: css2.scrollArea, children: /* @__PURE__ */ jsx$1("div", { css: css2.imageWrap, children: /* @__PURE__ */ jsx$1("img", { src: imageUrl, css: css2.image, alt: "", onMouseDown: handleMouseDragStart, onTouchStart: handleTouchDragStart }) }) }),
+    /* @__PURE__ */ jsx$1("div", { ref: scrollAreaRef, css: css2.scrollArea, children: /* @__PURE__ */ jsx$1("div", { css: css2.imageWrap, children: /* @__PURE__ */ jsx$1("img", { src: imageUrl, css: css2.image, alt: "", onMouseDown: handleImageMouseDown }) }) }),
     /* @__PURE__ */ jsx$1("div", { css: /* @__PURE__ */ css$1({
       ...css2.chevron,
       ...css2.chevronLeft
@@ -43246,6 +43528,7 @@ function DesktopLayout$1({
   onOpenAccordionItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck,
   onSignOut
@@ -43342,7 +43625,7 @@ function DesktopLayout$1({
     gridTemplateColumns
   }, children: [
     /* @__PURE__ */ jsx$1("div", { css: css2.avatarColumn, onMouseEnter: () => setAvatarHovered(true), onMouseLeave: () => setAvatarHovered(false), children: /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection, frameUrls, controls, selectedFrameIndex, setSelectedFrameIndex }) }),
-    hasSelection ? /* @__PURE__ */ jsx$1("div", { css: css2.detailColumn, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "desktop", detailMode, isMobileQuickRow: false, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) }) : null,
+    hasSelection ? /* @__PURE__ */ jsx$1("div", { css: css2.detailColumn, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "desktop", detailMode, isMobileQuickRow: false, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck }) }) : null,
     /* @__PURE__ */ jsxs("div", { css: css2.railsColumn, children: [
       /* @__PURE__ */ jsxs("span", { css: css2.signOutWrapper, onClick: onSignOut, children: [
         /* @__PURE__ */ jsx$1(SvgTfrIcon, { css: css2.signOutIcon }),
@@ -43477,13 +43760,14 @@ function MobileLayout$1({
   onOpenAccordionItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
   if (mode === "browse") {
     return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onTryItOn });
   }
-  return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck });
+  return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck });
 }
 function BrowseView({
   resolved,
@@ -43583,6 +43867,7 @@ function TryOnView({
   onOpenAccordionItem,
   onChangeDetailMode,
   onChangeSize,
+  onChangeColor,
   onAddToCart,
   onToggleUntuck
 }) {
@@ -43683,7 +43968,7 @@ function TryOnView({
         /* @__PURE__ */ jsx$1(SvgDragHandle, {}),
         /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.sheetTitle, children: "RECOMMENDED SIZES" })
       ] }),
-      sheetSnap === "collapsed" ? null : /* @__PURE__ */ jsx$1("div", { css: css2.sheetContent, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "mobile", detailMode, isMobileQuickRow, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onAddToCart, onToggleUntuck }) })
+      sheetSnap === "collapsed" ? null : /* @__PURE__ */ jsx$1("div", { css: css2.sheetContent, children: /* @__PURE__ */ jsx$1(DetailAccordion, { items: selectedItems, openItemExternalId: openAccordionItemId, platform: "mobile", detailMode, isMobileQuickRow, forceUntuck, canTuck, onOpenItem: onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck }) })
     ] }) })
   ] });
 }
@@ -43956,6 +44241,25 @@ function FittingRoomOverlay({
       color: csa.colorLabel
     });
   }, [resolved.items, updateFittingRoomItem]);
+  const handleChangeColor = reactExports.useCallback((externalId, colorLabel) => {
+    const item = resolved.items.find((i) => i.externalId === externalId);
+    if (!item || !item.storage.size) {
+      return;
+    }
+    const productData = buildVtoProductDataFromResolved(item);
+    if (!productData) {
+      return;
+    }
+    const csa = findCsaByLabel(productData, item.storage.size, colorLabel);
+    if (!csa) {
+      return;
+    }
+    updateFittingRoomItem(externalId, {
+      colorwaySizeAssetId: csa.colorwaySizeAssetId,
+      size: item.storage.size,
+      color: csa.colorLabel
+    });
+  }, [resolved.items, updateFittingRoomItem]);
   const handleAddToCart = reactExports.useCallback(async (externalId) => {
     const {
       addToCart
@@ -44148,7 +44452,7 @@ function FittingRoomOverlay({
       /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.emptyTagline, t: "landing.description" }),
       /* @__PURE__ */ jsx$1("div", { css: css2.emptyShopNow, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "primary", t: "fitting_room.shop_now", onClick: handleShopNow }) }),
       userIsLoggedIn ? /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.emptySignOut, t: "fitting_room.sign_out", onClick: handleSignOut }) : null
-    ] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onTryItOn: handleTryItOn, onBackToBrowse: handleBackToBrowse, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck }) : /* @__PURE__ */ jsx$1(DesktopLayout$1, { resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck, onSignOut: handleSignOut }),
+    ] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, sheetSnap, sheetTouchStart, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onTryItOn: handleTryItOn, onBackToBrowse: handleBackToBrowse, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onChangeColor: handleChangeColor, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck }) : /* @__PURE__ */ jsx$1(DesktopLayout$1, { resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, onSelectItem: handleSelectItem, onRemoveItem: handleRemoveItem, onOpenAccordionItem: setOpenAccordionItemId, onChangeDetailMode: setDetailMode, onChangeSize: handleChangeSize, onChangeColor: handleChangeColor, onAddToCart: handleAddToCart, onToggleUntuck: handleToggleUntuck, onSignOut: handleSignOut }),
     vtoError ? /* @__PURE__ */ jsx$1(Snackbar, { messageKey: "fitting_room.vto_error", onDismiss: clearVtoError }) : null
   ] }) });
 }
@@ -44338,7 +44642,7 @@ function GetAppOverlay({
     openOverlay(OverlayName.SIGN_IN, {
       returnToOverlay
     });
-  }, [returnToOverlay]);
+  }, [openOverlay, returnToOverlay]);
   const handleGetAppAppleClick = reactExports.useCallback(() => {
     const url = getStaticData().config.links.appAppleStoreUrl;
     window.open(url, "_blank");
@@ -44405,12 +44709,12 @@ function LandingOverlay({
     openOverlay(OverlayName.GET_APP, {
       returnToOverlay
     });
-  }, [returnToOverlay]);
+  }, [openOverlay, returnToOverlay]);
   const handleSignInClick = reactExports.useCallback(() => {
     openOverlay(OverlayName.SIGN_IN, {
       returnToOverlay
     });
-  }, [returnToOverlay]);
+  }, [openOverlay, returnToOverlay]);
   return /* @__PURE__ */ jsxs(ContentModal, { onRequestClose: closeOverlay, title: /* @__PURE__ */ jsx$1(TextT, { variant: "brand", css: css2.titleText, t: "try_it_on" }), children: [
     /* @__PURE__ */ jsx$1("div", { css: css2.headerText, children: /* @__PURE__ */ jsx$1(TextT, { variant: "brand", css: css2.headerText, t: t("landing.header") }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.description, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: t("landing.description") }) }),
@@ -44550,12 +44854,12 @@ function SignInOverlay({
     openOverlay(OverlayName.FORGOT_PASSWORD, {
       returnToOverlay
     });
-  }, [returnToOverlay]);
+  }, [openOverlay, returnToOverlay]);
   const handleGetAppClick = reactExports.useCallback(() => {
     openOverlay(OverlayName.GET_APP, {
       returnToOverlay
     });
-  }, [returnToOverlay]);
+  }, [openOverlay, returnToOverlay]);
   return /* @__PURE__ */ jsx$1(ContentModal, { onRequestClose: closeOverlay, title: /* @__PURE__ */ jsx$1(TfrTitle, {}), children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, css: css2.form, children: [
     /* @__PURE__ */ jsx$1("div", { css: css2.emailContainer, children: /* @__PURE__ */ jsx$1("input", { name: "email", type: "email", placeholder: t("sign-in.email"), required: true, css: /* @__PURE__ */ css$1({
       ...css2.input,
@@ -44942,7 +45246,9 @@ function QuickViewOverlay() {
         const {
           color: selectedColor
         } = await currentProduct.getSelectedOptions();
-        const styleCategoryLabel = storeProduct.style.style_category_label || null;
+        const styleCategoryIndex = await loadStyleCategoryIndex();
+        const styleCategoryRecord = styleCategoryIndex.byName(storeProduct.style.style_category_name);
+        const styleCategoryLabel = styleCategoryRecord?.label_singular ?? styleCategoryRecord?.label ?? null;
         const sizeRecommendationRecord = storeProduct.sizeFitRecommendation;
         {
           const recommendedSizeId = sizeRecommendationRecord.recommended_size.id || null;
@@ -45115,7 +45421,7 @@ function QuickViewOverlay() {
         error
       });
     });
-  }, [closeOverlay, openOverlay]);
+  }, [closeOverlay]);
   const handleAddToCartClick = reactExports.useCallback(async () => {
     try {
       if (!selectedSizeLabel) {
@@ -45137,7 +45443,7 @@ function QuickViewOverlay() {
         error
       });
     }
-  }, [selectedColorLabel, selectedSizeLabel]);
+  }, [closeOverlay, selectedColorLabel, selectedSizeLabel]);
   if (vtoProductData === false) {
     return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(NoFitLayout, { onClose: closeOverlay, onSignOut: handleSignOutClick }) });
   }
@@ -45602,7 +45908,9 @@ function DesktopLayout({
     },
     productNameContainer: {},
     productNameText: {
-      fontSize: "32px"
+      fontFamily: "'Inter', sans-serif",
+      fontSize: "32px",
+      fontWeight: 300
     },
     priceContainer: {
       marginTop: "8px"
@@ -45636,17 +45944,27 @@ function DesktopLayout({
       marginTop: "8px",
       lineHeight: "normal"
     },
-    itemFitText: {},
+    itemFitText: {
+      fontFamily: "'Inter', sans-serif",
+      fontWeight: 300
+    },
     selectSizeLabelContainer: {
       lineHeight: "normal"
     },
-    selectSizeLabelText: {},
+    selectSizeLabelText: {
+      fontFamily: "'Inter', sans-serif",
+      fontWeight: 300
+    },
     sizeSelectorContainer: {
       marginTop: "24px"
     },
     itemFitDetailsContainer: {
       marginTop: "24px",
-      width: "100%"
+      width: "100%",
+      // Cascades into <ItemFitDetails>; the bold recommended-size line above
+      // and the size-selector buttons stay at their own weights.
+      fontFamily: "'Inter', sans-serif",
+      fontWeight: 300
     },
     fitChartContainer: {
       marginTop: "16px"
@@ -45851,7 +46169,7 @@ function Avatar({
     return () => {
       window.removeEventListener("resize", refreshLayoutData);
     };
-  }, [isMobileLayout]);
+  }, [isMobileLayout, setModalStyle]);
   const isReady = !!frameUrls && selectedFrameIndex != null;
   return /* @__PURE__ */ jsxs("div", { css: css2.topContainer, style: layoutData.topContainerStyle, children: [
     /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: layoutData.imageContainerStyle, imageStyle: layoutData.imageStyle, loadingT: "quick-view.avatar_loading" }),
@@ -45880,10 +46198,14 @@ function ProductSummaryRow({
     },
     labelContainer: {},
     labelText: {
+      fontFamily: "'Times New Roman', serif",
+      fontSize: "16px",
       color: "#1A1A1A"
     },
     nameContainer: {},
     nameText: {
+      fontFamily: "'Times New Roman', serif",
+      fontSize: "16px",
       color: "#9F9F9F"
     }
   }));
@@ -45892,35 +46214,6 @@ function ProductSummaryRow({
     /* @__PURE__ */ jsx$1("div", { css: css2.nameContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.nameText, children: loadedProductData.productName }) })
   ] });
 }
-function ColorSelector({
-  availableColorLabels,
-  selectedColorLabel,
-  onChangeColor
-}) {
-  const css2 = useCss((theme) => ({
-    colorContainer: {},
-    colorLabelText: {
-      fontSize: "12px"
-    },
-    colorSelect: {
-      border: "none",
-      color: theme.color_fg_text,
-      fontFamily: theme.font_family,
-      fontSize: "12px"
-    }
-  }));
-  const handleColorSelectChange = reactExports.useCallback((e) => {
-    const newColorLabel = e.target.value || null;
-    onChangeColor(newColorLabel);
-  }, []);
-  if (availableColorLabels.length < 2) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsxs("label", { children: [
-    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.colorLabelText, t: "quick-view.color_label" }),
-    /* @__PURE__ */ jsx$1("select", { value: selectedColorLabel ?? "", onChange: handleColorSelectChange, css: css2.colorSelect, children: availableColorLabels.map((colorLabel) => /* @__PURE__ */ jsx$1("option", { value: colorLabel, children: colorLabel }, colorLabel)) })
-  ] }) });
-}
 function RecommendedSizeText({
   loadedProductData,
   textCss
@@ -46501,9 +46794,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.24"}`,
-    commitHash: `${"931e0b2"}`,
-    date: `${"2026-05-19T21:17:10.057Z"}`
+    version: `${"5.0.26"}`,
+    commitHash: `${"357d81c"}`,
+    date: `${"2026-05-23T18:08:09.620Z"}`
   }
 };
 const CONFIGS = {
@@ -46627,7 +46920,7 @@ const CONFIGS = {
 const getConfig = (envName) => {
   return CONFIGS[envName];
 };
-const css = "\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n/* Inter — the SDK's own typeface, matching the Figma designs. Loaded here so\n   overlay text renders in Inter regardless of the host page's fonts. */\nbody.tfr-modal-open {\n  overflow: hidden;\n  position: fixed;\n  width: 100%;\n}\n";
+const css = "\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');\n/* Inter — the SDK's own typeface, matching the Figma designs. Loaded here so\n   overlay text renders in Inter regardless of the host page's fonts. The\n   variable-axis URL serves every integer weight from 100 to 900 in one file\n   so any `font-weight: <n>` value renders accurately without falling back to\n   the nearest pre-loaded weight. */\nbody.tfr-modal-open {\n  overflow: hidden;\n  position: fixed;\n  width: 100%;\n}\n";
 class TfrWidgetElement extends HTMLElement {
   connectedCallback() {
     const attributes = this.getAttributeNames().reduce((attrs, name2) => {
@@ -46650,7 +46943,8 @@ async function init(initParams) {
       debug,
       productLookup,
       getOverlayTopOffset,
-      addToCart
+      addToCart,
+      testHooks
     } = initParams;
     if (!brandId || typeof brandId !== "number" || isNaN(brandId) || brandId <= 0) {
       throw new Error(`Invalid brandId "${brandId}"`);
@@ -46676,7 +46970,8 @@ async function init(initParams) {
       config,
       productLookup: productLookup ?? null,
       getOverlayTopOffset: getOverlayTopOffset ?? null,
-      addToCart: addToCart ?? null
+      addToCart: addToCart ?? null,
+      testHooks
     });
     _init$7();
     _init$5();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "5.0.24",
+  "version": "5.0.26",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",
@@ -22,8 +22,12 @@
     "promote-latest": "sh scripts/promote-latest.sh",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "format": "prettier --write src",
-    "format:check": "prettier --check src"
+    "format": "prettier --write src tests playwright.config.ts",
+    "format:check": "prettier --check src tests playwright.config.ts",
+    "test": "npm run test:e2e",
+    "test:e2e": "playwright test",
+    "test:e2e:debug": "PWDEBUG=1 playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "engines": {
     "node": ">=22"
@@ -33,6 +37,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@playwright/test": "^1.60.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/react-modal": "^3.16.3",