@thefittingroom/shop-ui 5.0.27 → 5.0.29

package/dist/index.js

@@ -19358,7 +19358,7 @@ const loading$1 = "Loading...";
 const add_to_fitting_room$1 = "Add to Fitting Room";
 const added_to_fitting_room$1 = "In Fitting Room";
 const view_fitting_room$1 = "Fitting Room";
-const fitting_room$1 = { "title": "Fitting Room", "empty": "Your fitting room is empty.", "size_not_chosen": "Size not chosen — pick one before trying on.", "remove": "Remove", "ungrouped": "Other", "try_it_on": "Try it on", "view_product_details": "View product details", "hide_product_details": "Hide product details", "add_to_cart": "Add to cart", "recommended_sizes": "Recommended sizes", "shop_now": "Shop now", "sign_out": "Sign out", "try_it_tucked_in": "Try it tucked in", "try_it_untucked": "Try it untucked", "avatar_placeholder_empty": "Add clothes to try on by selecting items in the rails.", "avatar_placeholder_selected": "Avatar render will appear here once VTO is wired up.", "see_selected_items": "See Selected Items", "no_selection": "Nothing selected yet.", "tuck_in": "Tuck In", "untuck": "Untuck", "zoom_in": "Zoom In", "zoom_out": "Zoom Out", "vto_error": "Couldn't load the try-on. Please try again." };
+const fitting_room$1 = { "title": "Fitting Room", "empty": "Your fitting room is empty.", "size_not_chosen": "Size not chosen — pick one before trying on.", "remove": "Remove", "ungrouped": "Other", "try_it_on": "Try it on", "view_product_details": "View product details", "hide_product_details": "Hide product details", "add_to_cart": "Add to cart", "recommended_sizes": "Recommended sizes", "shop_now": "Shop now", "sign_out": "Sign out", "clear_all": "Clear All", "try_it_tucked_in": "Try it tucked in", "try_it_untucked": "Try it untucked", "avatar_placeholder_empty": "Add clothes to try on by selecting items in the rails.", "avatar_placeholder_selected": "Avatar render will appear here once VTO is wired up.", "see_selected_items": "See Selected Items", "no_selection": "Nothing selected yet.", "tuck_in": "Tuck In", "untuck": "Untuck", "zoom_in": "Zoom In", "zoom_out": "Zoom Out", "vto_error": "Couldn't load the try-on. Please try again." };
 const landing$1 = { "header": "Meet your mini me!", "description": "Loose on your waist but tight on your hips? We’ll show you.", "get_the_app": "Get the app", "already_have_account": "Already have an account?", "sign_in": "Sign in." };
 const en$1 = {
   try_it_on: try_it_on$1,
@@ -41432,7 +41432,7 @@ async function _init$4() {
     config,
     testHooks
   } = getStaticData();
-  if (testHooks !== void 0) {
+  if (testHooks && (testHooks.auth !== void 0 || testHooks.firestore !== void 0)) {
     const seedDocs = {
       ...testHooks.firestore?.docs ?? {}
     };
@@ -42769,7 +42769,17 @@ function ProductCard({
     onClick();
   };
   const name2 = item.merchantProduct?.productName ?? item.externalId;
-  const selectedVariant = item.merchantProduct?.variants.find((v) => v.color === item.storage.color && (!item.storage.size || v.size === item.storage.size));
+  let effectiveColor = item.storage.color;
+  if (!effectiveColor && item.loadedProduct) {
+    const sizeRec = item.loadedProduct.sizeFitRecommendation;
+    const recommendedSize = sizeRec.available_sizes.find((s) => s.id === sizeRec.recommended_size.id);
+    const firstCsa = recommendedSize?.colorway_size_assets[0];
+    if (firstCsa) {
+      const variant = item.merchantProduct?.variants.find((v) => v.sku === firstCsa.sku);
+      effectiveColor = variant?.color ?? null;
+    }
+  }
+  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;
   return /* @__PURE__ */ jsxs("div", { css: /* @__PURE__ */ css$1({
@@ -43653,7 +43663,8 @@ function DesktopLayout$1({
   onChangeColor,
   onAddToCart,
   onToggleUntuck,
-  onSignOut
+  onSignOut,
+  onClearAll
 }) {
   const hasSelection = selectedItems.length > 0;
   const [avatarHovered, setAvatarHovered] = reactExports.useState(false);
@@ -43714,32 +43725,44 @@ function DesktopLayout$1({
       gap: "24px",
       padding: `26px ${EDGE_INSET_PX}px ${EDGE_INSET_PX}px 8px`
     },
-    // Sign-out is overlaid on the top-right corner of the rails column so it
-    // shares a row with the first card-rail header rather than reserving its
-    // own row. It scrolls away with the content, which is fine — it only
-    // needs to overlap that first header.
-    signOutWrapper: {
-      position: "absolute",
-      // Near the overlay top, partially overlapping the first card-rail
-      // header row below it.
-      top: "15px",
-      right: "24px",
-      zIndex: 3,
+    // Shared icon+link visual for the rails column's two utility actions
+    // (Clear All in the top-right corner, Sign Out at the bottom). Callers
+    // add their own positioning on top.
+    utilityLink: {
       display: "inline-flex",
       alignItems: "center",
       gap: "8px",
       cursor: "pointer",
       color: _theme.color_tfr_800
     },
-    signOutIcon: {
+    utilityIcon: {
       width: "12px",
       height: "22px",
       fill: _theme.color_tfr_800,
       flex: "none"
     },
-    signOut: {
+    utilityText: {
       color: _theme.color_tfr_800,
       fontSize: "14px"
+    },
+    // Clear All is overlaid on the top-right corner of the rails column so it
+    // shares a row with the first card-rail header rather than reserving its
+    // own row. It scrolls away with the content, which is fine — it only
+    // needs to overlap that first header.
+    clearAllWrapper: {
+      position: "absolute",
+      top: "15px",
+      right: "24px",
+      zIndex: 3
+    },
+    // Sign Out sits at the bottom of the rails column, after the last card
+    // rail. It scrolls with the content — visible once the shopper reaches
+    // the end of their items. marginTop: auto in a flex column would only
+    // help with a non-scrolling parent; here the scroll context makes a
+    // top margin enough to separate it from the last rail above.
+    signOutWrapper: {
+      marginTop: "8px",
+      justifyContent: "center"
     }
   }));
   const controls = hasSelection ? /* @__PURE__ */ jsx$1(AvatarControls, { selectedItems, canTuck, forceUntuck, zoomed: zoomOpen, expanded: avatarHovered, onToggleUntuck, onToggleZoom: () => setZoomOpen(true), onRemoveItem }) : null;
@@ -43749,11 +43772,18 @@ function DesktopLayout$1({
     /* @__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: [
-        /* @__PURE__ */ jsx$1(SvgTfrIcon, { css: css2.signOutIcon }),
-        /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOut, t: "fitting_room.sign_out" })
-      ] }),
-      resolved.groups.map((group) => /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }, group.group.name))
+      /* @__PURE__ */ jsx$1("span", { css: /* @__PURE__ */ css$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)),
+      /* @__PURE__ */ jsxs("span", { css: /* @__PURE__ */ css$1({
+        ...css2.utilityLink,
+        ...css2.signOutWrapper
+      }, "", ""), onClick: onSignOut, children: [
+        /* @__PURE__ */ jsx$1(SvgTfrIcon, { css: css2.utilityIcon }),
+        /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.utilityText, t: "fitting_room.sign_out" })
+      ] })
     ] }),
     zoomOpen && frameUrls && frameUrls.length > 0 ? /* @__PURE__ */ jsx$1(ZoomModal, { frameUrls, selectedFrameIndex, setSelectedFrameIndex, onClose: () => setZoomOpen(false) }) : null
   ] });
@@ -43885,10 +43915,12 @@ function MobileLayout$1({
   onChangeSize,
   onChangeColor,
   onAddToCart,
-  onToggleUntuck
+  onToggleUntuck,
+  onSignOut,
+  onClearAll
 }) {
   if (mode === "browse") {
-    return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onTryItOn });
+    return /* @__PURE__ */ jsx$1(BrowseView, { resolved, availabilityByExternalId, selectedCount: selectedItems.length, onSelectItem, onRemoveItem, onTryItOn, onSignOut, onClearAll });
   }
   return /* @__PURE__ */ jsx$1(TryOnView, { selectedItems, openAccordionItemId, detailMode, forceUntuck, canTuck, frameUrls, autoRotateTrigger, sheetSnap, sheetTouchStart, onBackToBrowse, onOpenAccordionItem, onChangeDetailMode, onChangeSize, onChangeColor, onAddToCart, onToggleUntuck });
 }
@@ -43898,7 +43930,9 @@ function BrowseView({
   selectedCount,
   onSelectItem,
   onRemoveItem,
-  onTryItOn
+  onTryItOn,
+  onSignOut,
+  onClearAll
 }) {
   const railsAreaRef = reactExports.useRef(null);
   const sectionRefs = reactExports.useRef(/* @__PURE__ */ new Map());
@@ -43941,13 +43975,13 @@ function BrowseView({
       behavior: "smooth"
     });
   }, []);
-  const css2 = useCss((_theme) => ({
+  const css2 = useCss((theme) => ({
     container: {
       display: "flex",
       flexDirection: "column",
       height: "100%",
       width: "100%",
-      // Positioning context for the floating SectionNav pill.
+      // Positioning context for the floating SectionNav + Clear All pills.
       position: "relative"
     },
     railsArea: {
@@ -43958,6 +43992,62 @@ function BrowseView({
       flexDirection: "column",
       gap: "24px"
     },
+    // Sign Out lives at the very bottom of the scrollable card list — same
+    // pattern as desktop. Centered icon+link in TFR teal. Scrolls into view
+    // once the shopper reaches the end of their items.
+    signOutWrapper: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "8px",
+      cursor: "pointer",
+      color: theme.color_tfr_800,
+      marginTop: "8px"
+    },
+    signOutIcon: {
+      width: "12px",
+      height: "22px",
+      fill: theme.color_tfr_800,
+      flex: "none"
+    },
+    signOutText: {
+      color: theme.color_tfr_800,
+      fontSize: "14px"
+    },
+    // Clear All — white pill with thin black border, black text. Positioned
+    // absolute over the BrowseView container, bottom-right, offset to clear
+    // the Try It On CTA bar below it. Pill shape matches the SectionNav
+    // pill at the top-right, but inverted on color for visual contrast.
+    clearAllPill: {
+      position: "absolute",
+      bottom: "96px",
+      right: "16px",
+      zIndex: 5,
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "6px 16px",
+      borderRadius: "999px",
+      backgroundColor: "#FFFFFF",
+      color: theme.color_fg_text,
+      border: `1px solid ${theme.color_fg_text}`,
+      cursor: "pointer",
+      fontSize: "13px",
+      fontWeight: "500",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase",
+      whiteSpace: "nowrap"
+    },
+    clearAllText: {
+      color: theme.color_fg_text
+    },
+    clearAllIcon: {
+      width: "12px",
+      height: "12px",
+      flex: "none"
+      // close-icon.svg's <path>s have a hardcoded dark fill — already matches
+      // the new black-on-white pill, no override needed.
+    },
     bottomBar: {
       flex: "none",
       padding: "16px",
@@ -43967,13 +44057,23 @@ 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,
-    /* @__PURE__ */ jsx$1("div", { ref: railsAreaRef, css: css2.railsArea, onScroll: recomputeActiveSection, children: resolved.groups.map((group) => /* @__PURE__ */ jsx$1("div", { ref: (el) => {
-      if (el) {
-        sectionRefs.current.set(group.group.name, el);
-      } else {
-        sectionRefs.current.delete(group.group.name);
-      }
-    }, children: /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }) }, group.group.name)) }),
+    /* @__PURE__ */ jsxs("div", { ref: railsAreaRef, css: css2.railsArea, onScroll: recomputeActiveSection, children: [
+      resolved.groups.map((group) => /* @__PURE__ */ jsx$1("div", { ref: (el) => {
+        if (el) {
+          sectionRefs.current.set(group.group.name, el);
+        } else {
+          sectionRefs.current.delete(group.group.name);
+        }
+      }, children: /* @__PURE__ */ jsx$1(CardRail, { group, availabilityByExternalId, onSelectItem, onRemoveItem }) }, 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" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { variant: "base", css: css2.clearAllPill, onClick: onClearAll, children: [
+      /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.clearAllText, t: "fitting_room.clear_all" }),
+      /* @__PURE__ */ jsx$1(SvgCloseIcon, { css: css2.clearAllIcon })
+    ] }),
     resolved.groups.length > 0 ? /* @__PURE__ */ jsx$1("div", { css: css2.bottomBar, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "fitting_room.try_it_on", onClick: onTryItOn, disabled: selectedCount === 0 }) }) : null
   ] });
 }
@@ -44231,6 +44331,7 @@ function FittingRoomOverlay({
   const openOverlay = useMainStore((state) => state.openOverlay);
   const updateFittingRoomItem = useMainStore((state) => state.updateFittingRoomItem);
   const removeFromFittingRoom = useMainStore((state) => state.removeFromFittingRoom);
+  const clearFittingRoom = useMainStore((state) => state.clearFittingRoom);
   const resolved = useResolvedFittingRoom();
   const [topOffset, setTopOffset] = reactExports.useState(0);
   const [selectedExternalIds, setSelectedExternalIds] = reactExports.useState(() => /* @__PURE__ */ new Set());
@@ -44448,6 +44549,13 @@ function FittingRoomOverlay({
       setOpenAccordionItemId(null);
     }
   }, [openAccordionItemId, selectedExternalIds]);
+  reactExports.useEffect(() => {
+    if (sheetSnap !== "full" || openAccordionItemId !== null || selectedItems.length === 0) {
+      return;
+    }
+    const lastAddedSelected = lastAddedExternalId && selectedExternalIds.has(lastAddedExternalId) ? lastAddedExternalId : null;
+    setOpenAccordionItemId(lastAddedSelected ?? selectedItems[0].externalId);
+  }, [sheetSnap, openAccordionItemId, selectedItems, lastAddedExternalId, selectedExternalIds]);
   const preselectAppliedRef = reactExports.useRef(false);
   reactExports.useEffect(() => {
     if (preselectAppliedRef.current || !preselectExternalId) {
@@ -44509,6 +44617,11 @@ function FittingRoomOverlay({
       });
     });
   }, [closeOverlay]);
+  const handleClearAll = reactExports.useCallback(() => {
+    clearFittingRoom();
+    setSelectedExternalIds(/* @__PURE__ */ new Set());
+    setOpenAccordionItemId(null);
+  }, [clearFittingRoom]);
   const handleShopNow = reactExports.useCallback(() => {
     closeOverlay();
   }, [closeOverlay]);
@@ -44581,7 +44694,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, 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 }),
+    ] }) }) : 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, onSignOut: handleSignOut, onClearAll: handleClearAll }) : /* @__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, onClearAll: handleClearAll }),
     vtoError ? /* @__PURE__ */ jsx$1(Snackbar, { messageKey: "fitting_room.vto_error", onDismiss: clearVtoError }) : null
   ] }) });
 }
@@ -46719,6 +46832,13 @@ var DeviceLayout = /* @__PURE__ */ ((DeviceLayout2) => {
 })(DeviceLayout || {});
 function _init$1() {
   function getDeviceData() {
+    const testDevice = getStaticData().testHooks?.device;
+    if (testDevice) {
+      return {
+        isMobileDevice: testDevice.isMobileDevice ?? testDevice.layout.startsWith("mobile"),
+        deviceLayout: testDevice.layout
+      };
+    }
     const bowserParser = Bowser.getParser(window.navigator.userAgent);
     const {
       width,
@@ -46983,9 +47103,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.27"}`,
-    commitHash: `${"9e3e717"}`,
-    date: `${"2026-05-24T21:00:26.048Z"}`
+    version: `${"5.0.29"}`,
+    commitHash: `${"538bbd3"}`,
+    date: `${"2026-05-25T01:10:21.610Z"}`
   }
 };
 const CONFIGS = {

package/package.json

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