@thefittingroom/shop-ui 5.0.30 → 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;
     }
@@ -42824,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";
@@ -42880,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
@@ -42896,7 +42942,8 @@ function CardRail({
   availabilityByExternalId,
   onSelectItem,
   onRemoveItem,
-  onChangeColor
+  onChangeColor,
+  sortSelectedFirst
 }) {
   const [collapsed, setCollapsed] = reactExports.useState(false);
   const scrollRef = reactExports.useRef(null);
@@ -43000,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), onChangeColor }, 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 }),
@@ -43867,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, onChangeColor }, 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
@@ -44531,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);
@@ -47202,9 +47260,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.30"}`,
-    commitHash: `${"e4427c3"}`,
-    date: `${"2026-06-07T13:46:16.711Z"}`
+    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.30",
+  "version": "5.0.31",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",