@thefittingroom/shop-ui 5.0.29 → 5.0.31

package/dist/index.js

@@ -42073,14 +42073,38 @@ function pairCompatible(a, b, group) {
   }
   return aIncl.includes(bName) || bIncl.includes(aName);
 }
+function getSameCategoryConflicts(item, selectedExternalIds, resolved) {
+  if (!item.styleCategory) {
+    return [];
+  }
+  const itemName = catName(item.styleCategory);
+  const out = [];
+  for (const sel of resolved.items) {
+    if (sel.externalId === item.externalId) {
+      continue;
+    }
+    if (!selectedExternalIds.has(sel.externalId)) {
+      continue;
+    }
+    if (!sel.styleCategory) {
+      continue;
+    }
+    if (catName(sel.styleCategory) === itemName) {
+      out.push(sel.externalId);
+    }
+  }
+  return out;
+}
 function computeAvailability(item, selectedExternalIds, resolved) {
   if (selectedExternalIds.has(item.externalId)) {
     return "selected";
   }
-  if (selectedExternalIds.size >= MAX_OUTFIT_ITEMS) {
+  if (!item.styleCategory) {
     return "disabled";
   }
-  if (!item.styleCategory) {
+  const sameCategoryEvictions = new Set(getSameCategoryConflicts(item, selectedExternalIds, resolved));
+  const effectiveSize = selectedExternalIds.size - sameCategoryEvictions.size + 1;
+  if (effectiveSize > MAX_OUTFIT_ITEMS) {
     return "disabled";
   }
   const itemCat = item.styleCategory;
@@ -42088,6 +42112,9 @@ function computeAvailability(item, selectedExternalIds, resolved) {
     if (!selectedExternalIds.has(sel.externalId)) {
       continue;
     }
+    if (sameCategoryEvictions.has(sel.externalId)) {
+      continue;
+    }
     if (!sel.styleCategory) {
       continue;
     }
@@ -42680,11 +42707,77 @@ function Chevron({
     transform: `rotate(${ROTATION_DEG[direction]}deg)`
   }, children: /* @__PURE__ */ jsx$1("path", { d: "M6 9L12 15L18 9", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
+function ColorSwatchRow({
+  colors,
+  selectedLabel,
+  onSelect
+}) {
+  const css2 = useCss((theme) => ({
+    row: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "6px"
+    },
+    swatch: {
+      width: "24px",
+      height: "24px",
+      borderRadius: "50%",
+      padding: 0,
+      border: "1px solid rgba(0, 0, 0, 0.15)",
+      backgroundColor: "#FFFFFF",
+      cursor: "pointer",
+      overflow: "hidden",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      // Reset native button chrome so the circle renders crisply.
+      appearance: "none",
+      WebkitAppearance: "none"
+    },
+    swatchSelected: {
+      outline: `2px solid ${theme.color_fg_text}`,
+      outlineOffset: "1px",
+      borderColor: "transparent"
+    },
+    swatchImage: {
+      width: "100%",
+      height: "100%",
+      objectFit: "cover"
+    },
+    // Tiny text label, used only as a last-resort fallback when neither an
+    // image nor a hex is available. Truncates so a long colour name
+    // doesn't break the swatch shape.
+    swatchTextLabel: {
+      fontSize: "9px",
+      lineHeight: 1,
+      color: theme.color_fg_text,
+      padding: "0 2px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      maxWidth: "100%"
+    }
+  }));
+  if (colors.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx$1("div", { css: css2.row, children: colors.map((c) => {
+    const isSelected = c.label === selectedLabel;
+    const fillStyle = c.imageUrl ? void 0 : c.hex ? {
+      backgroundColor: c.hex
+    } : void 0;
+    return /* @__PURE__ */ jsx$1(Button, { variant: "base", css: isSelected ? {
+      ...css2.swatch,
+      ...css2.swatchSelected
+    } : css2.swatch, style: fillStyle, onClick: () => onSelect(c.label), "aria-label": `Pick colour ${c.label}`, "aria-pressed": isSelected, children: c.imageUrl ? /* @__PURE__ */ jsx$1("img", { src: c.imageUrl, alt: "", css: css2.swatchImage }) : c.hex ? null : /* @__PURE__ */ jsx$1("span", { css: css2.swatchTextLabel, children: c.label.slice(0, 3) }) }, c.label);
+  }) });
+}
 function ProductCard({
   item,
   availability,
   onClick,
-  onRemove
+  onRemove,
+  onChangeColor
 }) {
   const css2 = useCss((theme) => ({
     container: {
@@ -42758,6 +42851,24 @@ function ProductCard({
     removeIcon: {
       width: "12px",
       height: "12px"
+    },
+    // Selected badge — mirrors the X button at the top-right, green-filled
+    // circle at top-left with an inline white checkmark. Only rendered when
+    // availability === 'selected'. Decorative: pointer-events: none so the
+    // shopper still taps the card body underneath to toggle off.
+    selectedBadge: {
+      position: "absolute",
+      top: "4px",
+      left: "4px",
+      width: "24px",
+      height: "24px",
+      borderRadius: "12px",
+      backgroundColor: "#22C55E",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      zIndex: 1
     }
   }));
   const disabled = availability === "disabled";
@@ -42782,6 +42893,29 @@ function ProductCard({
   const selectedVariant = item.merchantProduct?.variants.find((v) => v.color === effectiveColor && (!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;
+  const swatchColors = reactExports.useMemo(() => {
+    const variants = item.merchantProduct?.variants;
+    if (!variants) {
+      return [];
+    }
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const v of variants) {
+      if (!v.color || seen.has(v.color)) {
+        continue;
+      }
+      seen.add(v.color);
+      out.push({
+        label: v.color,
+        imageUrl: v.swatchImageUrl ?? null,
+        hex: v.swatchHex ?? null
+      });
+    }
+    return out;
+  }, [item.merchantProduct?.variants]);
+  const handleSwatchSelect = (label) => {
+    onChangeColor?.(item.externalId, label);
+  };
   return /* @__PURE__ */ jsxs("div", { css: /* @__PURE__ */ css$1({
     ...css2.container,
     ...selected && css2.containerSelected,
@@ -42791,6 +42925,7 @@ function ProductCard({
       e.stopPropagation();
       onRemove();
     }, "aria-label": "Remove from fitting room", children: /* @__PURE__ */ jsx$1(SvgCloseIcon, { css: css2.removeIcon }) }),
+    selected ? /* @__PURE__ */ jsx$1("div", { css: css2.selectedBadge, "aria-hidden": "true", children: /* @__PURE__ */ jsx$1("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx$1("path", { d: "M3 8.5L6.5 12L13 4.5", stroke: "#FFFFFF", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) : null,
     /* @__PURE__ */ jsxs(Button, { variant: "base", css: /* @__PURE__ */ css$1({
       ...css2.cardBody,
       ...disabled && css2.cardBodyDisabled
@@ -42798,14 +42933,17 @@ function ProductCard({
       /* @__PURE__ */ jsx$1("div", { css: css2.imageContainer, children: imageUrl ? /* @__PURE__ */ jsx$1("img", { src: imageUrl, css: css2.image, alt: name2 }) : null }),
       /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.nameText, children: name2 }),
       price ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.priceText, children: price }) : null
-    ] })
+    ] }),
+    onChangeColor ? /* @__PURE__ */ jsx$1(ColorSwatchRow, { colors: swatchColors, selectedLabel: effectiveColor, onSelect: handleSwatchSelect }) : null
   ] });
 }
 function CardRail({
   group,
   availabilityByExternalId,
   onSelectItem,
-  onRemoveItem
+  onRemoveItem,
+  onChangeColor,
+  sortSelectedFirst
 }) {
   const [collapsed, setCollapsed] = reactExports.useState(false);
   const scrollRef = reactExports.useRef(null);
@@ -42909,7 +43047,12 @@ function CardRail({
       right: 0
     }
   }));
-  const cards = group.items.map((item) => /* @__PURE__ */ jsx$1(ProductCard, { item, availability: availabilityByExternalId[item.externalId] ?? "disabled", onClick: () => onSelectItem(item.externalId), onRemove: () => onRemoveItem(item.externalId) }, item.externalId));
+  const orderedItems = sortSelectedFirst ? [...group.items].sort((a, b) => {
+    const aSel = availabilityByExternalId[a.externalId] === "selected" ? 0 : 1;
+    const bSel = availabilityByExternalId[b.externalId] === "selected" ? 0 : 1;
+    return aSel - bSel;
+  }) : group.items;
+  const cards = orderedItems.map((item) => /* @__PURE__ */ jsx$1(ProductCard, { item, availability: availabilityByExternalId[item.externalId] ?? "disabled", onClick: () => onSelectItem(item.externalId), onRemove: () => onRemoveItem(item.externalId), onChangeColor }, item.externalId));
   return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
     /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.header, onClick: () => setCollapsed((c) => !c), children: [
       /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.headerLabel, children: group.group.label }),
@@ -43776,7 +43919,7 @@ function DesktopLayout$1({
         ...css2.utilityLink,
         ...css2.clearAllWrapper
       }, "", ""), onClick: onClearAll, children: /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.utilityText, t: "fitting_room.clear_all" }) }),
-      resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }, group.group.name)),
+      resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem, onChangeColor, sortSelectedFirst: true }, group.group.name)),
       /* @__PURE__ */ jsxs("span", { css: /* @__PURE__ */ css$1({
         ...css2.utilityLink,
         ...css2.signOutWrapper
@@ -43920,7 +44063,7 @@ function MobileLayout$1({
   onClearAll
 }) {
   if (mode === "browse") {
-    return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onTryItOn, onSignOut, onClearAll });
+    return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onChangeColor, onTryItOn, onSignOut, onClearAll });
   }
   return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, autoRotateTrigger, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck });
 }
@@ -43930,6 +44073,7 @@ function BrowseView({
   selectedCount,
   onSelectItem,
   onRemoveItem,
+  onChangeColor,
   onTryItOn,
   onSignOut,
   onClearAll
@@ -44056,7 +44200,7 @@ function BrowseView({
     }
   }));
   return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
-    !resolved.isLoading && resolved.groups.length > 0 ? /* @__PURE__ */ jsx$1(SectionNav, { sections, activeName: activeSectionName, onSelect: scrollToSection }) : null,
+    !resolved.isLoading && resolved.groups.length > 1 ? /* @__PURE__ */ jsx$1(SectionNav, { sections, activeName: activeSectionName, onSelect: scrollToSection }) : null,
     /* @__PURE__ */ jsxs("div", { ref: railsAreaRef, css: css2.railsArea, onScroll: recomputeActiveSection, children: [
       resolved.groups.map((group) => /* @__PURE__ */ jsx$1("div", { ref: (el) => {
         if (el) {
@@ -44064,7 +44208,7 @@ function BrowseView({
         } else {
           sectionRefs.current.delete(group.group.name);
         }
-      }, children: /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }) }, group.group.name)),
+      }, children: /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem, onChangeColor }) }, group.group.name)),
       /* @__PURE__ */ jsxs("span", { css: css2.signOutWrapper, onClick: onSignOut, children: [
         /* @__PURE__ */ jsx$1(SvgTfrIcon, { css: css2.signOutIcon }),
         /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOutText, t: "fitting_room.sign_out" })
@@ -44439,6 +44583,12 @@ function FittingRoomOverlay({
         setOpenAccordionItemId(null);
       }
     } else {
+      for (const evictedId of getSameCategoryConflicts(item, selectedExternalIds, resolved)) {
+        nextSelected.delete(evictedId);
+        if (openAccordionItemId === evictedId) {
+          setOpenAccordionItemId(null);
+        }
+      }
       nextSelected.add(externalId);
       ensureSizeForItem(item);
       setLastAddedExternalId(externalId);
@@ -44471,20 +44621,24 @@ function FittingRoomOverlay({
   }, [resolved.items, updateFittingRoomItem]);
   const handleChangeColor = reactExports.useCallback((externalId, colorLabel) => {
     const item = resolved.items.find((i) => i.externalId === externalId);
-    if (!item || !item.storage.size) {
+    if (!item) {
       return;
     }
     const productData = buildVtoProductDataFromResolved(item);
     if (!productData) {
       return;
     }
-    const csa = findCsaByLabel(productData, item.storage.size, colorLabel);
+    const effectiveSize = item.storage.size ?? productData.recommendedSizeLabel;
+    if (!effectiveSize) {
+      return;
+    }
+    const csa = findCsaByLabel(productData, effectiveSize, colorLabel);
     if (!csa) {
       return;
     }
     updateFittingRoomItem(externalId, {
       colorwaySizeAssetId: csa.colorwaySizeAssetId,
-      size: item.storage.size,
+      size: effectiveSize,
       color: csa.colorLabel
     });
   }, [resolved.items, updateFittingRoomItem]);
@@ -44576,13 +44730,16 @@ function FittingRoomOverlay({
     if (outfit.items.length === 0) {
       return;
     }
+    if (isMobileLayout && mobileMode === "browse") {
+      return;
+    }
     requestVtoComposition(toWireItems(outfit.items), true);
     if (getStaticData().config.features.vtoPrefetch) {
       for (const alt of outfit.alternates) {
         requestVtoComposition(toWireItems(alt), false);
       }
     }
-  }, [userIsLoggedIn, userHasAvatar, outfit, requestVtoComposition]);
+  }, [userIsLoggedIn, userHasAvatar, isMobileLayout, mobileMode, outfit, requestVtoComposition]);
   const frameUrls = reactExports.useMemo(() => {
     if (outfit.items.length === 0) {
       const bareFrames = userProfile?.avatar_frames;
@@ -47103,9 +47260,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.29"}`,
-    commitHash: `${"538bbd3"}`,
-    date: `${"2026-05-25T01:10:21.610Z"}`
+    version: `${"5.0.31"}`,
+    commitHash: `${"992c5c6"}`,
+    date: `${"2026-06-07T14:43:50.848Z"}`
   }
 };
 const CONFIGS = {

package/package.json

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