@thefittingroom/shop-ui 5.0.26 → 5.0.27

package/dist/index.js

@@ -14100,6 +14100,40 @@ function _init$7() {
   useMainStore.setState({
     fittingRoom: items
   });
+  if (typeof window !== "undefined") {
+    window.addEventListener("storage", (e) => {
+      if (e.key !== STORAGE_KEY) {
+        return;
+      }
+      useMainStore.setState({
+        fittingRoom: readFittingRoom(brandId)
+      });
+    });
+  }
+}
+function resolveCurrentProductCsaId(productId, size, color) {
+  if (size == null) {
+    return null;
+  }
+  const {
+    currentProduct
+  } = getStaticData();
+  if (!currentProduct) {
+    return null;
+  }
+  const stored = useMainStore.getState().productData[productId];
+  if (!stored || "error" in stored) {
+    return null;
+  }
+  const sizeRec = stored.sizeFitRecommendation.available_sizes.find((s) => getSizeLabelFromSize(s) === size);
+  if (!sizeRec) {
+    return null;
+  }
+  const csa = sizeRec.colorway_size_assets.find((c) => {
+    const variant = currentProduct.variants.find((v) => v.sku === c.sku);
+    return variant?.color === color;
+  });
+  return csa?.id ?? null;
 }
 async function addFittingRoomItem(productId, handle, isPdp) {
   const state = useMainStore.getState();
@@ -14108,9 +14142,7 @@ async function addFittingRoomItem(productId, handle, isPdp) {
     handle,
     isPdp
   });
-  let size = null;
   let color = null;
-  let colorwaySizeAssetId = null;
   let resolvedHandle = handle;
   if (isPdp) {
     const {
@@ -14122,37 +14154,59 @@ async function addFittingRoomItem(productId, handle, isPdp) {
       }
       try {
         const selection = await currentProduct.getSelectedOptions();
-        size = selection.size || null;
         color = selection.color;
       } catch (error) {
         logger$g.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,
     handle: resolvedHandle,
-    size,
+    size: null,
     color,
-    colorwaySizeAssetId,
+    colorwaySizeAssetId: null,
     addedAt: Date.now()
   });
 }
+async function syncCurrentProductSelection() {
+  const {
+    currentProduct
+  } = getStaticData();
+  if (!currentProduct) {
+    return;
+  }
+  const state = useMainStore.getState();
+  const existing = state.fittingRoom.find((item) => item.externalId === currentProduct.externalId);
+  if (!existing) {
+    return;
+  }
+  let color = null;
+  try {
+    const selection = await currentProduct.getSelectedOptions();
+    color = selection.color;
+  } catch (error) {
+    logger$g.logWarn("syncCurrentProductSelection: failed to read selected options", {
+      error
+    });
+    return;
+  }
+  if (color === existing.color) {
+    return;
+  }
+  const colorwaySizeAssetId = resolveCurrentProductCsaId(currentProduct.externalId, existing.size, color);
+  state.updateFittingRoomItem(currentProduct.externalId, {
+    color,
+    colorwaySizeAssetId
+  });
+  logger$g.logDebug("{{ts}} - Synced PDP color into fitting-room", {
+    externalId: currentProduct.externalId,
+    color,
+    colorwaySizeAssetId
+  });
+}
 async function toggleFittingRoomItem(productId, handle, isPdp) {
   const state = useMainStore.getState();
   const isInFittingRoom = state.fittingRoom.some((item) => item.externalId === productId);
@@ -42201,7 +42255,12 @@ function AvatarControls({
       // clip rendered the text at fractional opacity while it reflowed each
       // frame, which subpixel-shimmered. The max-width clip alone reveals
       // the label cleanly at full opacity.
-      transition: "max-width 500ms cubic-bezier(0.22, 1, 0.36, 1)"
+      transition: "max-width 500ms cubic-bezier(0.22, 1, 0.36, 1)",
+      // Belt-and-suspenders with pillBaseStyle on the parent — rapid clicks
+      // on the avatar's rotation chevrons can otherwise extend a triple-
+      // click selection into these labels.
+      userSelect: "none",
+      WebkitUserSelect: "none"
     },
     pillLabelCollapsed: {
       maxWidth: 0
@@ -42317,37 +42376,43 @@ function MobileTuckControl({
   ] }) });
 }
 const DRAG_STEP_PX = 50;
-function useFrameRotation(frameUrls, setSelectedFrameIndex) {
+const AXIS_LOCK_PX$1 = 8;
+function applyDragSteps(deltaX, rotateLeft, rotateRight) {
+  const steps = Math.floor(Math.abs(deltaX) / DRAG_STEP_PX);
+  if (steps === 0) {
+    return 0;
+  }
+  const fn = deltaX > 0 ? rotateRight : rotateLeft;
+  for (let i = 0; i < steps; i++) {
+    fn();
+  }
+  return (deltaX > 0 ? 1 : -1) * steps * DRAG_STEP_PX;
+}
+function useFrameRotation(frameUrls, setSelectedFrameIndex, onUserInteract) {
   const frameCount = frameUrls?.length ?? 0;
   const rotateLeft = reactExports.useCallback(() => {
+    onUserInteract?.();
     setSelectedFrameIndex((prev2) => {
       if (prev2 == null || frameCount === 0) {
         return prev2;
       }
       return prev2 === 0 ? frameCount - 1 : prev2 - 1;
     });
-  }, [frameCount, setSelectedFrameIndex]);
+  }, [frameCount, onUserInteract, setSelectedFrameIndex]);
   const rotateRight = reactExports.useCallback(() => {
+    onUserInteract?.();
     setSelectedFrameIndex((prev2) => {
       if (prev2 == null || frameCount === 0) {
         return prev2;
       }
       return prev2 === frameCount - 1 ? 0 : prev2 + 1;
     });
-  }, [frameCount, setSelectedFrameIndex]);
+  }, [frameCount, onUserInteract, setSelectedFrameIndex]);
   const handleMouseDragStart = reactExports.useCallback((e) => {
     e.preventDefault();
     let startX = e.clientX;
     const onMove = (move) => {
-      const deltaX = move.clientX - startX;
-      if (Math.abs(deltaX) >= DRAG_STEP_PX) {
-        if (deltaX > 0) {
-          rotateRight();
-        } else {
-          rotateLeft();
-        }
-        startX = move.clientX;
-      }
+      startX += applyDragSteps(move.clientX - startX, rotateLeft, rotateRight);
     };
     const onUp = () => {
       window.removeEventListener("mousemove", onMove);
@@ -42357,25 +42422,37 @@ function useFrameRotation(frameUrls, setSelectedFrameIndex) {
     window.addEventListener("mouseup", onUp);
   }, [rotateLeft, rotateRight]);
   const handleTouchDragStart = reactExports.useCallback((e) => {
-    e.preventDefault();
     let startX = e.touches[0].clientX;
+    const startY = e.touches[0].clientY;
+    let mode = "unknown";
     const onMove = (move) => {
-      const deltaX = move.touches[0].clientX - startX;
-      if (Math.abs(deltaX) >= DRAG_STEP_PX) {
-        if (deltaX > 0) {
-          rotateRight();
-        } else {
-          rotateLeft();
+      const currentX = move.touches[0].clientX;
+      const currentY = move.touches[0].clientY;
+      if (mode === "unknown") {
+        const absDx = Math.abs(currentX - startX);
+        const absDy = Math.abs(currentY - startY);
+        if (absDx < AXIS_LOCK_PX$1 && absDy < AXIS_LOCK_PX$1) {
+          return;
         }
-        startX = move.touches[0].clientX;
+        mode = absDx >= absDy ? "horizontal" : "vertical";
+        startX = currentX;
       }
+      if (mode !== "horizontal") {
+        return;
+      }
+      move.preventDefault();
+      startX += applyDragSteps(currentX - startX, rotateLeft, rotateRight);
     };
     const onEnd = () => {
       window.removeEventListener("touchmove", onMove);
       window.removeEventListener("touchend", onEnd);
+      window.removeEventListener("touchcancel", onEnd);
     };
-    window.addEventListener("touchmove", onMove);
+    window.addEventListener("touchmove", onMove, {
+      passive: false
+    });
     window.addEventListener("touchend", onEnd);
+    window.addEventListener("touchcancel", onEnd);
   }, [rotateLeft, rotateRight]);
   return {
     rotateLeft,
@@ -42390,7 +42467,8 @@ function AvatarFrameViewer({
   setSelectedFrameIndex,
   imageContainerStyle,
   imageStyle,
-  loadingT = "quick-view.avatar_loading"
+  loadingT = "quick-view.avatar_loading",
+  onUserInteract
 }) {
   const css2 = useCss((_theme) => ({
     imageContainer: {
@@ -42398,21 +42476,31 @@ function AvatarFrameViewer({
     },
     image: {
       objectFit: "contain",
-      cursor: "grab"
+      cursor: "grab",
+      // Reserve horizontal touch gestures for our rotation handler — the
+      // browser can still pan vertically natively. Without this, the
+      // browser may start consuming a horizontal swipe as a scroll/zoom
+      // before our touchmove listener can preventDefault, which produced
+      // the "janky first swipe" reports.
+      touchAction: "pan-y"
     },
     chevronLeftContainer: {
       position: "absolute",
       top: "50%",
       left: "0",
       transform: "translateY(-50%)",
-      cursor: "pointer"
+      cursor: "pointer",
+      userSelect: "none",
+      WebkitUserSelect: "none"
     },
     chevronRightContainer: {
       position: "absolute",
       top: "50%",
       right: "0",
       transform: "translateY(-50%)",
-      cursor: "pointer"
+      cursor: "pointer",
+      userSelect: "none",
+      WebkitUserSelect: "none"
     },
     chevronIcon: {
       width: "48px",
@@ -42420,46 +42508,83 @@ function AvatarFrameViewer({
     }
   }));
   reactExports.useEffect(() => {
-    if (!frameUrls || frameUrls.length === 0 || selectedFrameIndex != null) {
-      return;
+    if (frameUrls && frameUrls.length > 0 && selectedFrameIndex == null) {
+      setSelectedFrameIndex(0);
     }
-    let currentFrameIndex = 0;
-    setSelectedFrameIndex(currentFrameIndex);
-    const intervalId = setInterval(() => {
-      currentFrameIndex = (currentFrameIndex + 1) % frameUrls.length;
-      setSelectedFrameIndex(currentFrameIndex);
-      if (currentFrameIndex === 0) {
-        clearInterval(intervalId);
-      }
-    }, 500);
-    return () => clearInterval(intervalId);
   }, [frameUrls, selectedFrameIndex, setSelectedFrameIndex]);
   const {
     rotateLeft,
     rotateRight,
     handleMouseDragStart,
     handleTouchDragStart
-  } = useFrameRotation(frameUrls, setSelectedFrameIndex);
+  } = useFrameRotation(frameUrls, setSelectedFrameIndex, onUserInteract);
   if (!frameUrls || selectedFrameIndex == null) {
     return /* @__PURE__ */ jsx$1(Loading, { t: loadingT });
   }
   return /* @__PURE__ */ jsxs("div", { css: css2.imageContainer, style: imageContainerStyle, children: [
     /* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: imageStyle, onMouseDown: handleMouseDragStart, onTouchStart: handleTouchDragStart }),
-    /* @__PURE__ */ jsx$1("div", { css: css2.chevronLeftContainer, onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
-    /* @__PURE__ */ jsx$1("div", { css: css2.chevronRightContainer, onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) })
+    /* @__PURE__ */ jsx$1("div", { role: "button", "aria-label": "Rotate left", css: css2.chevronLeftContainer, onMouseDown: (e) => e.preventDefault(), onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
+    /* @__PURE__ */ jsx$1("div", { role: "button", "aria-label": "Rotate right", css: css2.chevronRightContainer, onMouseDown: (e) => e.preventDefault(), onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) })
   ] });
 }
+const AUTO_ROTATE_DURATION_MS = 4e3;
+function useAutoRotate(trigger, frameUrls, selectedFrameIndex, setSelectedFrameIndex) {
+  const lastFiredRef = reactExports.useRef(void 0);
+  const intervalIdRef = reactExports.useRef(null);
+  const indexRef = reactExports.useRef(selectedFrameIndex);
+  reactExports.useEffect(() => {
+    indexRef.current = selectedFrameIndex;
+  }, [selectedFrameIndex]);
+  const cancelAutoRotate = reactExports.useCallback(() => {
+    if (intervalIdRef.current !== null) {
+      clearInterval(intervalIdRef.current);
+      intervalIdRef.current = null;
+    }
+  }, []);
+  const frameCount = frameUrls?.length ?? 0;
+  reactExports.useEffect(() => {
+    if (trigger === void 0) {
+      return;
+    }
+    if (frameCount === 0) {
+      return;
+    }
+    if (trigger === lastFiredRef.current) {
+      return;
+    }
+    const tickMs = Math.round(AUTO_ROTATE_DURATION_MS / frameCount);
+    const startFrameIndex = (indexRef.current ?? 0) % frameCount;
+    let currentFrameIndex = startFrameIndex;
+    let didFirstTick = false;
+    intervalIdRef.current = setInterval(() => {
+      if (!didFirstTick) {
+        didFirstTick = true;
+        lastFiredRef.current = trigger;
+      }
+      const nextFrameIndex = (currentFrameIndex + 1) % frameCount;
+      currentFrameIndex = nextFrameIndex;
+      setSelectedFrameIndex(nextFrameIndex);
+      if (nextFrameIndex === startFrameIndex) {
+        cancelAutoRotate();
+      }
+    }, tickMs);
+    return cancelAutoRotate;
+  }, [trigger, frameCount, setSelectedFrameIndex, cancelAutoRotate]);
+  return cancelAutoRotate;
+}
 function AvatarPane({
   frameUrls,
   hasSelection,
   controls,
   mobileFullscreen,
   selectedFrameIndex: indexProp,
-  setSelectedFrameIndex: setIndexProp
+  setSelectedFrameIndex: setIndexProp,
+  autoRotateTrigger
 }) {
   const [localFrameIndex, setLocalFrameIndex] = reactExports.useState(null);
   const selectedFrameIndex = indexProp !== void 0 ? indexProp : localFrameIndex;
   const setSelectedFrameIndex = setIndexProp ?? setLocalFrameIndex;
+  const cancelAutoRotate = useAutoRotate(autoRotateTrigger, frameUrls, selectedFrameIndex, setSelectedFrameIndex);
   const css2 = useCss((theme) => ({
     container: {
       width: "100%",
@@ -42517,7 +42642,7 @@ function AvatarPane({
     }
   }));
   if (frameUrls && frameUrls.length > 0) {
-    const viewer = /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: css2.frameContainer, imageStyle: css2.frameImage, loadingT: "quick-view.avatar_loading" });
+    const viewer = /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: css2.frameContainer, imageStyle: css2.frameImage, loadingT: "quick-view.avatar_loading", onUserInteract: cancelAutoRotate });
     if (mobileFullscreen) {
       return /* @__PURE__ */ jsxs("div", { css: css2.mobileContainer, children: [
         /* @__PURE__ */ jsxs("div", { css: css2.mobileFrameSlot, children: [
@@ -42644,8 +42769,9 @@ function ProductCard({
     onClick();
   };
   const name2 = item.merchantProduct?.productName ?? item.externalId;
-  const imageUrl = item.merchantProduct?.imageUrl ?? null;
-  const price = item.merchantProduct?.variants[0]?.priceFormatted ?? null;
+  const selectedVariant = item.merchantProduct?.variants.find((v) => v.color === item.storage.color && (!item.storage.size || v.size === item.storage.size));
+  const imageUrl = selectedVariant?.imageUrl ?? item.merchantProduct?.imageUrl ?? null;
+  const price = selectedVariant?.priceFormatted ?? item.merchantProduct?.variants[0]?.priceFormatted ?? null;
   return /* @__PURE__ */ jsxs("div", { css: /* @__PURE__ */ css$1({
     ...css2.container,
     ...selected && css2.containerSelected,
@@ -43353,7 +43479,6 @@ function DetailAccordion({
   }) });
 }
 const AXIS_LOCK_PX = 8;
-const ROTATE_STEP_PX = 50;
 function ZoomModal({
   frameUrls,
   selectedFrameIndex,
@@ -43399,15 +43524,7 @@ function ZoomModal({
       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;
-        }
+        lastRotateX += applyDragSteps(move.clientX - lastRotateX, rotateLeft, rotateRight);
       }
     };
     const onUp = () => {
@@ -43453,7 +43570,11 @@ function ZoomModal({
       transform: "translateY(-50%)",
       display: "flex",
       cursor: "pointer",
-      zIndex: 1
+      zIndex: 1,
+      // Rapid clicks shouldn't initiate a text-selection drag into the
+      // close-button glyph or any other overlay text.
+      userSelect: "none",
+      WebkitUserSelect: "none"
     },
     chevronLeft: {
       left: "8px"
@@ -43499,11 +43620,11 @@ function ZoomModal({
     /* @__PURE__ */ jsx$1("div", { css: /* @__PURE__ */ css$1({
       ...css2.chevron,
       ...css2.chevronLeft
-    }, "", ""), onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
+    }, "", ""), onMouseDown: (e) => e.preventDefault(), onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
     /* @__PURE__ */ jsx$1("div", { css: /* @__PURE__ */ css$1({
       ...css2.chevron,
       ...css2.chevronRight
-    }, "", ""), onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) }),
+    }, "", ""), onMouseDown: (e) => e.preventDefault(), onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) }),
     /* @__PURE__ */ jsx$1("button", { css: css2.close, onClick: onClose, "aria-label": "Close zoom", children: "×" })
   ] });
 }
@@ -43523,6 +43644,7 @@ function DesktopLayout$1({
   forceUntuck,
   canTuck,
   frameUrls,
+  autoRotateTrigger,
   onSelectItem,
   onRemoveItem,
   onOpenAccordionItem,
@@ -43624,7 +43746,7 @@ function DesktopLayout$1({
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, css: css2.container, style: {
     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 }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.avatarColumn, onMouseEnter: () => setAvatarHovered(true), onMouseLeave: () => setAvatarHovered(false), children: /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection, frameUrls, controls, selectedFrameIndex, setSelectedFrameIndex, autoRotateTrigger }) }),
     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: [
@@ -43751,6 +43873,7 @@ function MobileLayout$1({
   forceUntuck,
   canTuck,
   frameUrls,
+  autoRotateTrigger,
   sheetSnap,
   sheetTouchStart,
   onSelectItem,
@@ -43767,7 +43890,7 @@ function MobileLayout$1({
   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, onChangeColor, onAddToCart, onToggleUntuck });
+  return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, autoRotateTrigger, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck });
 }
 function BrowseView({
   resolved,
@@ -43861,6 +43984,7 @@ function TryOnView({
   forceUntuck,
   canTuck,
   frameUrls,
+  autoRotateTrigger,
   sheetSnap,
   sheetTouchStart,
   onBackToBrowse,
@@ -43961,7 +44085,7 @@ function TryOnView({
     }
   }));
   return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
-    /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection: selectedItems.length > 0, frameUrls, mobileFullscreen: true, controls: /* @__PURE__ */ jsx$1(MobileTuckControl, { canTuck, forceUntuck, onToggleUntuck }) }),
+    /* @__PURE__ */ jsx$1(AvatarPane, { hasSelection: selectedItems.length > 0, frameUrls, autoRotateTrigger, mobileFullscreen: true, controls: /* @__PURE__ */ jsx$1(MobileTuckControl, { canTuck, forceUntuck, onToggleUntuck }) }),
     /* @__PURE__ */ jsx$1(Button, { variant: "base", css: css2.backButton, onClick: onBackToBrowse, "aria-label": "Back to browse", children: /* @__PURE__ */ jsx$1(SvgIconLeftArrow, { css: css2.backArrow }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.sheetOuter, style: sheetStyle, children: /* @__PURE__ */ jsxs("div", { ref: innerRef, css: css2.sheetInner, style: sheetStyle, children: [
       /* @__PURE__ */ jsxs("div", { css: css2.sheetHandleRow, onTouchStart: sheetTouchStart, children: [
@@ -44106,9 +44230,11 @@ function FittingRoomOverlay({
   const closeOverlay = useMainStore((state) => state.closeOverlay);
   const openOverlay = useMainStore((state) => state.openOverlay);
   const updateFittingRoomItem = useMainStore((state) => state.updateFittingRoomItem);
+  const removeFromFittingRoom = useMainStore((state) => state.removeFromFittingRoom);
   const resolved = useResolvedFittingRoom();
   const [topOffset, setTopOffset] = reactExports.useState(0);
   const [selectedExternalIds, setSelectedExternalIds] = reactExports.useState(() => /* @__PURE__ */ new Set());
+  const [autoRotateTrigger, setAutoRotateTrigger] = reactExports.useState(void 0);
   const [openAccordionItemId, setOpenAccordionItemId] = reactExports.useState(null);
   const [detailMode, setDetailMode] = reactExports.useState("compact");
   const [forceUntuck, setForceUntuck] = reactExports.useState(false);
@@ -44215,6 +44341,7 @@ function FittingRoomOverlay({
       nextSelected.add(externalId);
       ensureSizeForItem(item);
       setLastAddedExternalId(externalId);
+      setAutoRotateTrigger((n) => (n ?? 0) + 1);
       if (!isMobileLayout) {
         setOpenAccordionItemId(externalId);
         setDetailMode("compact");
@@ -44307,7 +44434,8 @@ function FittingRoomOverlay({
     if (openAccordionItemId === externalId) {
       setOpenAccordionItemId(null);
     }
-  }, [openAccordionItemId]);
+    removeFromFittingRoom(externalId);
+  }, [openAccordionItemId, removeFromFittingRoom]);
   const handleTryItOn = reactExports.useCallback(() => {
     setMobileMode("try-on");
     setSheetSnap("collapsed");
@@ -44325,7 +44453,8 @@ function FittingRoomOverlay({
     if (preselectAppliedRef.current || !preselectExternalId) {
       return;
     }
-    if (!resolved.items.some((i) => i.externalId === preselectExternalId)) {
+    const item = resolved.items.find((i) => i.externalId === preselectExternalId);
+    if (!item || !item.merchantProduct || !item.loadedProduct) {
       return;
     }
     preselectAppliedRef.current = true;
@@ -44452,7 +44581,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, 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 }),
+    ] }) }) : isMobileLayout ? /* @__PURE__ */ jsx$1(MobileLayout$1, { mode: mobileMode, resolved, selectedItems, availabilityByExternalId, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, autoRotateTrigger, 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, autoRotateTrigger, 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
   ] }) });
 }
@@ -45179,6 +45308,8 @@ function FitChart({
 const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
 const AVATAR_GUTTER_HEIGHT_PX = 100;
 const CONTENT_AREA_WIDTH_PX = 550;
+const SHOW_ROTATION_SLIDER = false;
+const DESKTOP_AVATAR_GUTTER_HEIGHT_PX = 0;
 const logger$5 = getLogger("overlays/quick-view");
 function QuickViewOverlay() {
   const userIsLoggedIn = useMainStore((state) => state.userIsLoggedIn);
@@ -45188,6 +45319,8 @@ function QuickViewOverlay() {
   const deviceLayout = useMainStore((state) => state.deviceLayout);
   const openOverlay = useMainStore((state) => state.openOverlay);
   const closeOverlay = useMainStore((state) => state.closeOverlay);
+  const updateFittingRoomItem = useMainStore((state) => state.updateFittingRoomItem);
+  const fittingRoomItems = useMainStore((state) => state.fittingRoom);
   const [vtoProductData, setVtoProductData] = reactExports.useState(null);
   const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
   const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
@@ -45422,6 +45555,27 @@ function QuickViewOverlay() {
       });
     });
   }, [closeOverlay]);
+  const handleChangeColor = reactExports.useCallback((newColorLabel) => {
+    setSelectedColorLabel(newColorLabel);
+    const currentProduct = getStaticData().currentProduct;
+    if (!currentProduct) {
+      return;
+    }
+    const inRoom = fittingRoomItems.some((item) => item.externalId === currentProduct.externalId);
+    if (!inRoom || !vtoProductData || !selectedSizeLabel) {
+      return;
+    }
+    const sizeRec = vtoProductData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
+    const csa = sizeRec?.colors.find((c) => c.colorLabel === newColorLabel);
+    if (!csa) {
+      return;
+    }
+    updateFittingRoomItem(currentProduct.externalId, {
+      colorwaySizeAssetId: csa.colorwaySizeAssetId,
+      size: selectedSizeLabel,
+      color: csa.colorLabel
+    });
+  }, [fittingRoomItems, selectedSizeLabel, updateFittingRoomItem, vtoProductData]);
   const handleAddToCartClick = reactExports.useCallback(async () => {
     try {
       if (!selectedSizeLabel) {
@@ -45457,7 +45611,7 @@ function QuickViewOverlay() {
     Layout = DesktopLayout;
   }
   return /* @__PURE__ */ jsxs(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 }),
+    /* @__PURE__ */ jsx$1(Layout, { loadedProductData: vtoProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: handleChangeColor, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }),
     vtoError ? /* @__PURE__ */ jsx$1(Snackbar, { messageKey: "quick-view.vto_error", onDismiss: clearVtoError }) : null
   ] });
 }
@@ -45695,7 +45849,10 @@ function MobileLayout({
 }
 function MobileContentCollapsed({
   loadedProductData,
+  availableColorLabels,
+  selectedColorLabel,
   selectedSizeLabel,
+  onChangeColor,
   onChangeSize
 }) {
   const css2 = useCss((_theme) => ({
@@ -45705,17 +45862,24 @@ function MobileContentCollapsed({
     selectSizeLabelText: {},
     sizeSelectorContainer: {
       marginTop: "8px"
+    },
+    colorSelectorContainer: {
+      marginTop: "8px"
     }
   }));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
-    /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) })
+    /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.colorSelectorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) })
   ] });
 }
 function MobileContentExpanded({
   loadedProductData,
+  availableColorLabels,
+  selectedColorLabel,
   selectedSizeLabel,
   onChangeContentView,
+  onChangeColor,
   onChangeSize,
   onAddToCart
 }) {
@@ -45727,6 +45891,9 @@ function MobileContentExpanded({
     sizeSelectorContainer: {
       marginTop: "8px"
     },
+    colorSelectorContainer: {
+      marginTop: "8px"
+    },
     itemFitTextContainer: {
       marginTop: "8px"
     },
@@ -45756,6 +45923,7 @@ function MobileContentExpanded({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
+    /* @__PURE__ */ jsx$1("div", { css: css2.colorSelectorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.itemFitTextContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData }) }),
     /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) }),
     /* @__PURE__ */ jsxs("div", { css: css2.buttonContainer, children: [
@@ -45909,7 +46077,7 @@ function DesktopLayout({
     productNameContainer: {},
     productNameText: {
       fontFamily: "'Inter', sans-serif",
-      fontSize: "32px",
+      fontSize: "24px",
       fontWeight: 300
     },
     priceContainer: {
@@ -46029,6 +46197,7 @@ function Avatar({
   });
   const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
   const [zoomOpen, setZoomOpen] = reactExports.useState(false);
+  const cancelAutoRotate = useAutoRotate(1, frameUrls, selectedFrameIndex, setSelectedFrameIndex);
   const css2 = useCss((theme) => ({
     topContainer: {
       flex: "none",
@@ -46038,8 +46207,11 @@ function Avatar({
     },
     zoomPill: {
       position: "absolute",
-      // Bottom-right of the avatar image, clear of the slider gutter below it.
-      bottom: `${AVATAR_GUTTER_HEIGHT_PX + 16}px`,
+      // Bottom-right of the avatar image, 16px above the image's bottom edge.
+      // When the rotation slider is on, that's also `clear of the gutter` —
+      // when the slider is hidden, the gutter collapses to 0 and the 16px
+      // offset alone keeps the pill inset from the image's true bottom.
+      bottom: `${DESKTOP_AVATAR_GUTTER_HEIGHT_PX + 16}px`,
       right: "16px",
       display: "inline-flex",
       alignItems: "center",
@@ -46053,6 +46225,10 @@ function Avatar({
       letterSpacing: "0.5px",
       textTransform: "uppercase",
       cursor: "pointer",
+      // Rapid clicks on the rotation chevrons can otherwise spill a triple-
+      // click selection into this label.
+      userSelect: "none",
+      WebkitUserSelect: "none",
       zIndex: 2
     },
     zoomPillIcon: {
@@ -46129,7 +46305,7 @@ function Avatar({
         }
       } else {
         const screenHeightPx = window.innerHeight;
-        const bottomContainerHeightPx = AVATAR_GUTTER_HEIGHT_PX;
+        const bottomContainerHeightPx = DESKTOP_AVATAR_GUTTER_HEIGHT_PX;
         const imageHeightPx = screenHeightPx - bottomContainerHeightPx;
         const imageWidthPx = Math.floor(imageHeightPx * AVATAR_IMAGE_ASPECT_RATIO);
         const modalWidthPx = imageWidthPx + CONTENT_AREA_WIDTH_PX;
@@ -46172,13 +46348,13 @@ function Avatar({
   }, [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" }),
+    /* @__PURE__ */ jsx$1(AvatarFrameViewer, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, imageContainerStyle: layoutData.imageContainerStyle, imageStyle: layoutData.imageStyle, loadingT: "quick-view.avatar_loading", onUserInteract: cancelAutoRotate }),
     isReady && !isMobileLayout ? /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.zoomPill, onClick: () => setZoomOpen(true), children: [
       /* @__PURE__ */ jsx$1(SvgIconZoom, { css: css2.zoomPillIcon }),
       /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "quick-view.zoom_in" })
     ] }) : null,
     zoomOpen && frameUrls && frameUrls.length > 0 ? /* @__PURE__ */ jsx$1(ZoomModal, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, onClose: () => setZoomOpen(false) }) : null,
-    frameUrls && selectedFrameIndex != null ? /* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: layoutData.bottomContainerStyle, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    frameUrls && selectedFrameIndex != null && (isMobileLayout || SHOW_ROTATION_SLIDER) ? /* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: layoutData.bottomContainerStyle, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx$1("input", { type: "range", min: 0, max: frameUrls.length - 1, step: 1, value: selectedFrameIndex, onChange: (e) => setSelectedFrameIndex(Number(e.target.value)), css: css2.sliderInput }),
       /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "quick-view.slide_to_rotate", css: css2.sliderText })
     ] }) }) : null
@@ -46706,28 +46882,41 @@ const useMainStore = create((set) => ({
     }
   })),
   // Fitting room:
+  //
+  // Each mutation reads the latest localStorage state before applying the
+  // change, so two tabs adding different products at the same time merge
+  // instead of last-write-wins. The in-memory Zustand value is just a
+  // cache of "what was in localStorage the last time we touched it".
+  // Cross-tab UI freshness (Tab B's open fitting-room sees Tab A's add
+  // without a mutation of its own) is handled by the `storage` event
+  // listener registered in fitting-room-storage.ts::_init.
   fittingRoom: [],
-  addToFittingRoom: (item) => set((prevState) => {
-    const filtered = prevState.fittingRoom.filter((existing) => existing.externalId !== item.externalId);
-    const next2 = [...filtered, item];
-    writeFittingRoom(getStaticData().brandId, next2);
+  addToFittingRoom: (item) => set(() => {
+    const brandId = getStaticData().brandId;
+    const fresh = readFittingRoom(brandId);
+    const next2 = [...fresh.filter((existing) => existing.externalId !== item.externalId), item];
+    writeFittingRoom(brandId, next2);
     return {
       fittingRoom: next2
     };
   }),
-  removeFromFittingRoom: (externalId) => set((prevState) => {
-    const next2 = prevState.fittingRoom.filter((existing) => existing.externalId !== externalId);
-    writeFittingRoom(getStaticData().brandId, next2);
+  removeFromFittingRoom: (externalId) => set(() => {
+    const brandId = getStaticData().brandId;
+    const fresh = readFittingRoom(brandId);
+    const next2 = fresh.filter((existing) => existing.externalId !== externalId);
+    writeFittingRoom(brandId, next2);
     return {
       fittingRoom: next2
     };
   }),
-  updateFittingRoomItem: (externalId, patch) => set((prevState) => {
-    const next2 = prevState.fittingRoom.map((existing) => existing.externalId === externalId ? {
+  updateFittingRoomItem: (externalId, patch) => set(() => {
+    const brandId = getStaticData().brandId;
+    const fresh = readFittingRoom(brandId);
+    const next2 = fresh.map((existing) => existing.externalId === externalId ? {
       ...existing,
       ...patch
     } : existing);
-    writeFittingRoom(getStaticData().brandId, next2);
+    writeFittingRoom(brandId, next2);
     return {
       fittingRoom: next2
     };
@@ -46794,9 +46983,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.26"}`,
-    commitHash: `${"357d81c"}`,
-    date: `${"2026-05-23T18:08:09.620Z"}`
+    version: `${"5.0.27"}`,
+    commitHash: `${"9e3e717"}`,
+    date: `${"2026-05-24T21:00:26.048Z"}`
   }
 };
 const CONFIGS = {
@@ -47016,10 +47205,12 @@ async function logout() {
 }
 const TFR = {
   init,
-  logout
+  logout,
+  syncCurrentProductSelection
 };
 export {
   TFR as default,
   init,
-  logout
+  logout,
+  syncCurrentProductSelection
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "5.0.26",
+  "version": "5.0.27",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",