@thefittingroom/shop-ui 5.0.30 → 5.0.32

package/dist/index.js

@@ -14170,6 +14170,7 @@ async function addFittingRoomItem(productId, handle, isPdp) {
     colorwaySizeAssetId: null,
     addedAt: Date.now()
   });
+  state.setLastAddEvent(productId);
 }
 async function syncCurrentProductSelection() {
   const {
@@ -19358,7 +19359,10 @@ 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", "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 first_visit_tooltip$1 = { "body": "See items added to your fitting room here", "dismiss": "Dismiss" };
+const first_add_tooltip$1 = { "body": "Add item to your fitting room here", "dismiss": "Dismiss" };
+const add_confirmation$1 = { "title": "Your Fitting Room", "added_header": "Added to your fitting room", "cta": "Go to your fitting room", "remove": "Remove from fitting room", "dismiss": "Dismiss" };
+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.", "toggle_selection": "Toggle try-on selection", "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,
@@ -19367,6 +19371,9 @@ const en$1 = {
   add_to_fitting_room: add_to_fitting_room$1,
   added_to_fitting_room: added_to_fitting_room$1,
   view_fitting_room: view_fitting_room$1,
+  first_visit_tooltip: first_visit_tooltip$1,
+  first_add_tooltip: first_add_tooltip$1,
+  add_confirmation: add_confirmation$1,
   fitting_room: fitting_room$1,
   landing: landing$1,
   "get-app": { "create_avatar": "Create your avatar" },
@@ -19382,7 +19389,10 @@ const loading = "Chargement...";
 const add_to_fitting_room = "Ajouter à la cabine d'essayage";
 const added_to_fitting_room = "Dans la cabine d'essayage";
 const view_fitting_room = "Cabine d'essayage";
-const fitting_room = { "title": "Cabine d'essayage", "empty": "Votre cabine d'essayage est vide.", "size_not_chosen": "Taille non choisie — choisissez-en une avant l'essayage.", "remove": "Supprimer", "ungrouped": "Autres", "try_it_on": "Essayer", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit", "add_to_cart": "Ajouter au panier", "recommended_sizes": "Tailles recommandées", "shop_now": "Acheter", "sign_out": "Se déconnecter", "try_it_tucked_in": "Essayez-le rentré", "try_it_untucked": "Essayez-le non rentré", "avatar_placeholder_empty": "Ajoutez des vêtements à essayer en sélectionnant des articles.", "avatar_placeholder_selected": "L'avatar apparaîtra ici lorsque la VTO sera connectée.", "see_selected_items": "Voir la sélection", "no_selection": "Rien de sélectionné.", "tuck_in": "Rentrer", "untuck": "Sortir", "zoom_in": "Zoom +", "zoom_out": "Zoom −", "vto_error": "Impossible de charger l'essayage. Veuillez réessayer." };
+const first_visit_tooltip = { "body": "Voir les articles ajoutés à votre cabine d'essayage ici", "dismiss": "Fermer" };
+const first_add_tooltip = { "body": "Ajoutez un article à votre cabine d'essayage ici", "dismiss": "Fermer" };
+const add_confirmation = { "title": "Votre cabine d'essayage", "added_header": "Ajouté à votre cabine d'essayage", "cta": "Aller à votre cabine d'essayage", "remove": "Retirer de la cabine d'essayage", "dismiss": "Fermer" };
+const fitting_room = { "title": "Cabine d'essayage", "empty": "Votre cabine d'essayage est vide.", "size_not_chosen": "Taille non choisie — choisissez-en une avant l'essayage.", "remove": "Supprimer", "ungrouped": "Autres", "try_it_on": "Essayer", "view_product_details": "Voir les détails du produit", "hide_product_details": "Masquer les détails du produit", "add_to_cart": "Ajouter au panier", "recommended_sizes": "Tailles recommandées", "shop_now": "Acheter", "sign_out": "Se déconnecter", "try_it_tucked_in": "Essayez-le rentré", "try_it_untucked": "Essayez-le non rentré", "avatar_placeholder_empty": "Ajoutez des vêtements à essayer en sélectionnant des articles.", "avatar_placeholder_selected": "L'avatar apparaîtra ici lorsque la VTO sera connectée.", "see_selected_items": "Voir la sélection", "no_selection": "Rien de sélectionné.", "toggle_selection": "Activer/désactiver la sélection", "tuck_in": "Rentrer", "untuck": "Sortir", "zoom_in": "Zoom +", "zoom_out": "Zoom −", "vto_error": "Impossible de charger l'essayage. Veuillez réessayer." };
 const landing = { "header": "Rencontrez votre mini-moi !", "description": "Lâche à la taille mais serré aux hanches ? Nous allons vous montrer.", "get_the_app": "Obtenez l'application", "already_have_account": "Vous avez déjà un compte ?", "sign_in": "Connectez-vous." };
 const fr = {
   try_it_on,
@@ -19391,6 +19401,9 @@ const fr = {
   add_to_fitting_room,
   added_to_fitting_room,
   view_fitting_room,
+  first_visit_tooltip,
+  first_add_tooltip,
+  add_confirmation,
   fitting_room,
   landing,
   "get-app": { "create_avatar": "Créez votre avatar" },
@@ -19594,6 +19607,7 @@ const SvgLoadingCircle = (props) => /* @__PURE__ */ reactExports.createElement("
 const SvgIconSelectedItems = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 25, height: 25, viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M1.00024 18.125L12.4169 23.8333L23.8336 18.125M1.00024 12.4167L12.4169 18.125L23.8336 12.4167M12.4169 1L1.00024 6.70833L12.4169 12.4167L23.8336 6.70833L12.4169 1Z", stroke: "#1E1E1E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
 const SvgTfrIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 12, height: 24, viewBox: "0 0 12 24", fill: "#21201F", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M11.9082 4.0752V19.8516L0.161133 22.8545V1.05859L11.9082 4.0752ZM9.31836 10.8525C8.96951 10.8525 8.68661 11.206 8.68652 11.6416C8.68652 12.0773 8.96946 12.4307 9.31836 12.4307C9.6671 12.4304 9.9502 12.0771 9.9502 11.6416C9.95011 11.2062 9.66705 10.8528 9.31836 10.8525Z" }));
 const SvgTfrName = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 1584, height: 245, viewBox: "0 0 1584 245", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M131.362 34.4131V210.725L0 244.291V0.708984L131.362 34.4131ZM110.354 110.164C106.453 110.164 103.29 114.111 103.29 118.979C103.29 123.848 106.453 127.795 110.354 127.795C114.256 127.795 117.419 123.848 117.419 118.979C117.419 114.111 114.256 110.164 110.354 110.164Z", fill: "#265A64" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M175.848 76.9219V60.8636H271.533V76.9219H232.957V184.5H214.363V76.9219H175.848ZM309.279 129.443V184.5H291.229V60.8636H309.038V106.865H310.185C312.358 101.875 315.678 97.9103 320.146 94.9723C324.613 92.0343 330.449 90.5653 337.653 90.5653C344.012 90.5653 349.566 91.8733 354.315 94.4893C359.104 97.1053 362.807 101.009 365.423 106.201C368.079 111.353 369.407 117.792 369.407 125.519V184.5H351.356V127.692C351.356 120.891 349.606 115.619 346.104 111.876C342.603 108.093 337.733 106.201 331.495 106.201C327.229 106.201 323.406 107.107 320.025 108.918C316.684 110.729 314.048 113.385 312.116 116.886C310.225 120.348 309.279 124.533 309.279 129.443ZM433.459 186.371C424.323 186.371 416.455 184.42 409.854 180.516C403.294 176.571 398.223 171.038 394.641 163.914C391.1 156.75 389.329 148.359 389.329 138.74C389.329 129.242 391.1 120.871 394.641 113.626C398.223 106.382 403.214 100.728 409.613 96.6626C416.052 92.5978 423.578 90.5653 432.191 90.5653C437.423 90.5653 442.494 91.4306 447.404 93.1612C452.314 94.8918 456.721 97.6084 460.625 101.311C464.529 105.014 467.608 109.823 469.861 115.739C472.115 121.615 473.242 128.759 473.242 137.17V143.57H399.531V130.047H455.554C455.554 125.298 454.588 121.092 452.656 117.43C450.724 113.727 448.008 110.809 444.506 108.676C441.045 106.543 436.98 105.477 432.312 105.477C427.241 105.477 422.814 106.724 419.031 109.219C415.288 111.674 412.39 114.894 410.337 118.879C408.325 122.823 407.319 127.109 407.319 131.737V142.302C407.319 148.5 408.406 153.772 410.579 158.119C412.792 162.465 415.871 165.786 419.815 168.08C423.759 170.333 428.368 171.46 433.64 171.46C437.061 171.46 440.18 170.977 442.997 170.011C445.814 169.005 448.249 167.516 450.302 165.544C452.354 163.572 453.924 161.137 455.011 158.239L472.095 161.318C470.727 166.349 468.272 170.756 464.73 174.539C461.229 178.282 456.822 181.2 451.509 183.293C446.237 185.345 440.22 186.371 433.459 186.371ZM539.709 184.5V60.8636H616.378V76.9219H558.363V114.592H610.884V130.59H558.363V184.5H539.709ZM637.869 184.5V91.7727H655.92V184.5H637.869ZM646.985 77.4652C643.846 77.4652 641.149 76.4188 638.896 74.326C636.682 72.1929 635.575 69.6574 635.575 66.7195C635.575 63.7412 636.682 61.2057 638.896 59.1129C641.149 56.9799 643.846 55.9133 646.985 55.9133C650.124 55.9133 652.801 56.9799 655.014 59.1129C657.268 61.2057 658.395 63.7412 658.395 66.7195C658.395 69.6574 657.268 72.1929 655.014 74.326C652.801 76.4188 650.124 77.4652 646.985 77.4652ZM723.488 91.7727V106.261H672.838V91.7727H723.488ZM686.421 69.5568H704.472V157.273C704.472 160.775 704.995 163.411 706.041 165.182C707.088 166.912 708.436 168.1 710.086 168.744C711.776 169.347 713.608 169.649 715.58 169.649C717.029 169.649 718.296 169.549 719.383 169.347C720.47 169.146 721.315 168.985 721.918 168.864L725.178 183.776C724.132 184.178 722.643 184.58 720.711 184.983C718.779 185.426 716.364 185.667 713.467 185.707C708.718 185.788 704.291 184.943 700.186 183.172C696.08 181.401 692.76 178.664 690.225 174.962C687.689 171.259 686.421 166.611 686.421 161.016V69.5568ZM786.74 91.7727V106.261H736.09V91.7727H786.74ZM749.673 69.5568H767.724V157.273C767.724 160.775 768.247 163.411 769.293 165.182C770.34 166.912 771.688 168.1 773.338 168.744C775.028 169.347 776.86 169.649 778.832 169.649C780.281 169.649 781.548 169.549 782.635 169.347C783.722 169.146 784.567 168.985 785.17 168.864L788.43 183.776C787.384 184.178 785.895 184.58 783.963 184.983C782.031 185.426 779.616 185.667 776.719 185.707C771.97 185.788 767.543 184.943 763.437 183.172C759.332 181.401 756.012 178.664 753.477 174.962C750.941 171.259 749.673 166.611 749.673 161.016V69.5568ZM806.707 184.5V91.7727H824.758V184.5H806.707ZM815.823 77.4652C812.684 77.4652 809.987 76.4188 807.733 74.326C805.52 72.1929 804.413 69.6574 804.413 66.7195C804.413 63.7412 805.52 61.2057 807.733 59.1129C809.987 56.9799 812.684 55.9133 815.823 55.9133C818.962 55.9133 821.639 56.9799 823.852 59.1129C826.106 61.2057 827.233 63.7412 827.233 66.7195C827.233 69.6574 826.106 72.1929 823.852 74.326C821.639 76.4188 818.962 77.4652 815.823 77.4652ZM867.092 129.443V184.5H849.041V91.7727H866.367V106.865H867.514C869.647 101.955 872.988 98.0109 877.535 95.0327C882.124 92.0544 887.899 90.5653 894.861 90.5653C901.18 90.5653 906.714 91.8935 911.463 94.5497C916.212 97.1657 919.895 101.07 922.511 106.261C925.127 111.453 926.435 117.872 926.435 125.519V184.5H908.384V127.692C908.384 120.971 906.633 115.719 903.132 111.936C899.631 108.113 894.821 106.201 888.704 106.201C884.518 106.201 880.795 107.107 877.535 108.918C874.316 110.729 871.76 113.385 869.869 116.886C868.017 120.348 867.092 124.533 867.092 129.443ZM989.521 221.205C982.156 221.205 975.817 220.239 970.504 218.307C965.232 216.375 960.926 213.819 957.585 210.64C954.245 207.46 951.749 203.979 950.099 200.196L965.614 193.797C966.701 195.568 968.15 197.439 969.961 199.411C971.812 201.424 974.307 203.134 977.447 204.543C980.626 205.951 984.711 206.656 989.702 206.656C996.544 206.656 1002.2 204.985 1006.67 201.645C1011.13 198.345 1013.37 193.072 1013.37 185.828V167.597H1012.22C1011.13 169.569 1009.56 171.762 1007.51 174.177C1005.5 176.592 1002.72 178.684 999.18 180.455C995.638 182.226 991.03 183.112 985.355 183.112C978.03 183.112 971.43 181.401 965.554 177.98C959.718 174.519 955.09 169.428 951.669 162.707C948.288 155.945 946.598 147.634 946.598 137.774C946.598 127.914 948.268 119.462 951.609 112.419C954.989 105.376 959.618 99.983 965.494 96.2401C971.37 92.4569 978.03 90.5653 985.476 90.5653C991.231 90.5653 995.879 91.5312 999.421 93.4631C1002.96 95.3546 1005.72 97.5682 1007.69 100.104C1009.7 102.639 1011.25 104.873 1012.34 106.805H1013.67V91.7727H1031.36V186.553C1031.36 194.521 1029.51 201.061 1025.8 206.173C1022.1 211.284 1017.09 215.067 1010.77 217.522C1004.49 219.977 997.409 221.205 989.521 221.205ZM989.339 168.14C994.531 168.14 998.918 166.933 1002.5 164.518C1006.12 162.063 1008.86 158.561 1010.71 154.013C1012.6 149.425 1013.55 143.932 1013.55 137.533C1013.55 131.295 1012.62 125.801 1010.77 121.052C1008.92 116.303 1006.2 112.6 1002.62 109.944C999.039 107.247 994.612 105.899 989.339 105.899C983.906 105.899 979.379 107.308 975.756 110.125C972.134 112.902 969.397 116.685 967.546 121.474C965.735 126.264 964.83 131.616 964.83 137.533C964.83 143.61 965.755 148.942 967.606 153.531C969.458 158.119 972.195 161.701 975.817 164.276C979.479 166.852 983.987 168.14 989.339 168.14ZM1102 184.5V60.8636H1146.07C1155.65 60.8636 1163.6 62.5137 1169.92 65.8139C1176.28 69.1141 1181.03 73.6821 1184.17 79.5178C1187.31 85.3132 1188.88 92.0142 1188.88 99.6207C1188.88 107.187 1187.29 113.848 1184.11 119.603C1180.97 125.318 1176.22 129.765 1169.86 132.945C1163.54 136.124 1155.59 137.714 1146.01 137.714H1112.63V121.656H1144.32C1150.36 121.656 1155.27 120.79 1159.05 119.06C1162.88 117.329 1165.67 114.814 1167.44 111.513C1169.21 108.213 1170.1 104.249 1170.1 99.6207C1170.1 94.9522 1169.19 90.9074 1167.38 87.4865C1165.61 84.0656 1162.82 81.4496 1158.99 79.6385C1155.21 77.7872 1150.24 76.8615 1144.08 76.8615H1120.66V184.5H1102ZM1163.04 128.719L1193.58 184.5H1172.33L1142.39 128.719H1163.04ZM1248.02 186.371C1239.33 186.371 1231.74 184.379 1225.26 180.395C1218.78 176.411 1213.75 170.836 1210.17 163.673C1206.59 156.509 1204.8 148.138 1204.8 138.559C1204.8 128.94 1206.59 120.529 1210.17 113.325C1213.75 106.12 1218.78 100.526 1225.26 96.5419C1231.74 92.5575 1239.33 90.5653 1248.02 90.5653C1256.72 90.5653 1264.3 92.5575 1270.78 96.5419C1277.26 100.526 1282.29 106.12 1285.87 113.325C1289.46 120.529 1291.25 128.94 1291.25 138.559C1291.25 148.138 1289.46 156.509 1285.87 163.673C1282.29 170.836 1277.26 176.411 1270.78 180.395C1264.3 184.379 1256.72 186.371 1248.02 186.371ZM1248.08 171.219C1253.72 171.219 1258.39 169.73 1262.09 166.751C1265.79 163.773 1268.53 159.809 1270.3 154.859C1272.11 149.908 1273.01 144.455 1273.01 138.499C1273.01 132.582 1272.11 127.149 1270.3 122.199C1268.53 117.208 1265.79 113.204 1262.09 110.185C1258.39 107.167 1253.72 105.658 1248.08 105.658C1242.41 105.658 1237.7 107.167 1233.96 110.185C1230.25 113.204 1227.5 117.208 1225.69 122.199C1223.91 127.149 1223.03 132.582 1223.03 138.499C1223.03 144.455 1223.91 149.908 1225.69 154.859C1227.5 159.809 1230.25 163.773 1233.96 166.751C1237.7 169.73 1242.41 171.219 1248.08 171.219ZM1350.45 186.371C1341.76 186.371 1334.17 184.379 1327.69 180.395C1321.21 176.411 1316.18 170.836 1312.6 163.673C1309.02 156.509 1307.23 148.138 1307.23 138.559C1307.23 128.94 1309.02 120.529 1312.6 113.325C1316.18 106.12 1321.21 100.526 1327.69 96.5419C1334.17 92.5575 1341.76 90.5653 1350.45 90.5653C1359.15 90.5653 1366.73 92.5575 1373.21 96.5419C1379.69 100.526 1384.72 106.12 1388.31 113.325C1391.89 120.529 1393.68 128.94 1393.68 138.559C1393.68 148.138 1391.89 156.509 1388.31 163.673C1384.72 170.836 1379.69 176.411 1373.21 180.395C1366.73 184.379 1359.15 186.371 1350.45 186.371ZM1350.51 171.219C1356.15 171.219 1360.82 169.73 1364.52 166.751C1368.22 163.773 1370.96 159.809 1372.73 154.859C1374.54 149.908 1375.45 144.455 1375.45 138.499C1375.45 132.582 1374.54 127.149 1372.73 122.199C1370.96 117.208 1368.22 113.204 1364.52 110.185C1360.82 107.167 1356.15 105.658 1350.51 105.658C1344.84 105.658 1340.13 107.167 1336.39 110.185C1332.68 113.204 1329.93 117.208 1328.12 122.199C1326.35 127.149 1325.46 132.582 1325.46 138.499C1325.46 144.455 1326.35 149.908 1328.12 154.859C1329.93 159.809 1332.68 163.773 1336.39 166.751C1340.13 169.73 1344.84 171.219 1350.51 171.219ZM1413.83 184.5V91.7727H1431.15V106.865H1432.3C1434.23 101.754 1437.39 97.7694 1441.78 94.9119C1446.16 92.0142 1451.42 90.5653 1457.53 90.5653C1463.73 90.5653 1468.92 92.0142 1473.11 94.9119C1477.33 97.8097 1480.45 101.794 1482.47 106.865H1483.43C1485.65 101.915 1489.17 97.9706 1494 95.0327C1498.83 92.0544 1504.58 90.5653 1511.26 90.5653C1519.67 90.5653 1526.54 93.2015 1531.85 98.4737C1537.2 103.746 1539.88 111.695 1539.88 122.32V184.5H1521.83V124.01C1521.83 117.732 1520.12 113.184 1516.7 110.366C1513.27 107.549 1509.19 106.141 1504.44 106.141C1498.56 106.141 1494 107.952 1490.74 111.574C1487.48 115.156 1485.85 119.764 1485.85 125.398V184.5H1467.86V122.863C1467.86 117.832 1466.29 113.787 1463.15 110.729C1460.01 107.67 1455.92 106.141 1450.89 106.141C1447.47 106.141 1444.31 107.046 1441.42 108.857C1438.56 110.628 1436.24 113.103 1434.47 116.283C1432.74 119.462 1431.88 123.145 1431.88 127.33V184.5H1413.83Z", fill: "#265A64" }));
+const SvgTrashIcon = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M2.5 4H13.5", stroke: "#21201F", strokeWidth: 1.5, strokeLinecap: "round" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M6 4V2.5C6 2.22386 6.22386 2 6.5 2H9.5C9.77614 2 10 2.22386 10 2.5V4", stroke: "#21201F", strokeWidth: 1.5, strokeLinecap: "round" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M3.5 4V13C3.5 13.5523 3.94772 14 4.5 14H11.5C12.0523 14 12.5 13.5523 12.5 13V4", stroke: "#21201F", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M6.5 7V11", stroke: "#21201F", strokeWidth: 1.5, strokeLinecap: "round" }), /* @__PURE__ */ reactExports.createElement("path", { d: "M9.5 7V11", stroke: "#21201F", strokeWidth: 1.5, strokeLinecap: "round" }));
 const SvgIconTuck = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 18, height: 23, viewBox: "0 0 18 23", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M4.5 12.65V4.39875L1.60313 7.36L0 5.75L5.625 0L11.25 5.75L9.64687 7.36L6.75 4.39875V12.65H4.5ZM12.375 23L6.75 17.25L8.35313 15.64L11.25 18.6013V10.35H13.5V18.6013L16.3969 15.64L18 17.25L12.375 23Z", fill: "#21201F" }));
 const SvgIconZoom = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M19 19L14.65 14.65M9 6V12M6 9H12M17 9C17 13.4183 13.4183 17 9 17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z", stroke: "#1E1E1E", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }));
 let baseUrl$1;
@@ -41745,6 +41759,10 @@ async function loadFittingRoomData() {
   for (const item of items) {
     loadProductDataToStore(item.externalId);
   }
+  await loadMerchantProductData(items);
+}
+async function loadMerchantProductData(items) {
+  const state = useMainStore.getState();
   const {
     productLookup
   } = getStaticData();
@@ -42073,14 +42091,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 +42130,9 @@ function computeAvailability(item, selectedExternalIds, resolved) {
     if (!selectedExternalIds.has(sel.externalId)) {
       continue;
     }
+    if (sameCategoryEvictions.has(sel.externalId)) {
+      continue;
+    }
     if (!sel.styleCategory) {
       continue;
     }
@@ -42305,7 +42350,14 @@ function AvatarControls({
       border: "none",
       backgroundColor: "transparent",
       cursor: "pointer",
-      fontSize: "14px"
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 0
+    },
+    popoverRemoveIcon: {
+      width: "14px",
+      height: "14px"
     }
   }));
   const seeExpanded = expanded || popoverOpen;
@@ -42327,7 +42379,7 @@ function AvatarControls({
     popoverOpen ? /* @__PURE__ */ jsx$1("div", { css: css2.popover, children: selectedItems.length === 0 ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.popoverLabel, children: t("fitting_room.no_selection") }) : selectedItems.map((item) => /* @__PURE__ */ jsxs("div", { css: css2.popoverRow, children: [
       item.merchantProduct?.imageUrl ? /* @__PURE__ */ jsx$1("img", { src: item.merchantProduct.imageUrl, css: css2.popoverThumb, alt: "" }) : /* @__PURE__ */ jsx$1("div", { css: css2.popoverThumb }),
       /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.popoverLabel, children: item.merchantProduct?.productName ?? item.externalId }),
-      /* @__PURE__ */ jsx$1("button", { css: css2.popoverRemove, onClick: () => onRemoveItem(item.externalId), "aria-label": "Remove", children: "×" })
+      /* @__PURE__ */ jsx$1("button", { css: css2.popoverRemove, onClick: () => onRemoveItem(item.externalId), "aria-label": "Remove", children: /* @__PURE__ */ jsx$1(SvgTrashIcon, { css: css2.popoverRemoveIcon }) })
     ] }, item.externalId)) }) : null
   ] });
   return /* @__PURE__ */ jsxs("div", { css: css2.wrapper, children: [
@@ -42680,6 +42732,71 @@ 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 CardCheckbox({
+  state,
+  onClick,
+  ariaLabel
+}) {
+  const css2 = useCss((theme) => ({
+    base: {
+      position: "absolute",
+      top: "8px",
+      left: "8px",
+      width: "36px",
+      height: "20px",
+      borderRadius: "10px",
+      border: "none",
+      padding: 0,
+      zIndex: 1,
+      transition: "background-color 150ms ease-out"
+    },
+    unselected: {
+      backgroundColor: "#D4D4D4",
+      cursor: "pointer"
+    },
+    selected: {
+      backgroundColor: theme.color_tfr_800,
+      cursor: "pointer"
+    },
+    disabled: {
+      backgroundColor: "#EAEAEA",
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    },
+    thumb: {
+      position: "absolute",
+      top: "2px",
+      width: "16px",
+      height: "16px",
+      borderRadius: "8px",
+      backgroundColor: "#FFFFFF",
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.2)",
+      transition: "left 150ms ease-out"
+    },
+    thumbOff: {
+      left: "2px"
+    },
+    thumbOn: {
+      left: "18px"
+    }
+  }));
+  const trackCss = state === "selected" ? css2.selected : state === "disabled" ? css2.disabled : css2.unselected;
+  const thumbPosCss = state === "selected" ? css2.thumbOn : css2.thumbOff;
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (state === "disabled" || !onClick) {
+      return;
+    }
+    onClick();
+  };
+  return /* @__PURE__ */ jsx$1("button", { type: "button", css: /* @__PURE__ */ css$1({
+    ...css2.base,
+    ...trackCss
+  }, "", ""), onClick: handleClick, "aria-pressed": state === "selected", "aria-disabled": state === "disabled", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx$1("span", { css: /* @__PURE__ */ css$1({
+    ...css2.thumb,
+    ...thumbPosCss
+  }, "", "") }) });
+}
 function ColorSwatchRow({
   colors,
   selectedLabel,
@@ -42752,6 +42869,9 @@ function ProductCard({
   onRemove,
   onChangeColor
 }) {
+  const {
+    t
+  } = useTranslation();
   const css2 = useCss((theme) => ({
     container: {
       position: "relative",
@@ -42760,13 +42880,14 @@ function ProductCard({
       display: "flex",
       flexDirection: "column",
       gap: "8px",
-      padding: "8px",
-      border: "1px solid transparent",
+      padding: "12px 20px",
+      border: "1.5px solid #E0E0E0",
+      borderRadius: "8px",
       backgroundColor: "transparent",
       textAlign: "left"
     },
     containerSelected: {
-      border: `1px solid ${theme.color_fg_text}`
+      borderColor: theme.color_tfr_800
     },
     containerDisabled: {
       opacity: 0.35
@@ -42807,8 +42928,8 @@ function ProductCard({
     },
     removeButton: {
       position: "absolute",
-      top: "4px",
-      right: "4px",
+      top: "8px",
+      right: "8px",
       width: "24px",
       height: "24px",
       borderRadius: "12px",
@@ -42822,8 +42943,8 @@ function ProductCard({
       zIndex: 1
     },
     removeIcon: {
-      width: "12px",
-      height: "12px"
+      width: "14px",
+      height: "14px"
     }
   }));
   const disabled = availability === "disabled";
@@ -42879,7 +43000,8 @@ function ProductCard({
     /* @__PURE__ */ jsx$1("button", { css: css2.removeButton, onClick: (e) => {
       e.stopPropagation();
       onRemove();
-    }, "aria-label": "Remove from fitting room", children: /* @__PURE__ */ jsx$1(SvgCloseIcon, { css: css2.removeIcon }) }),
+    }, "aria-label": "Remove from fitting room", children: /* @__PURE__ */ jsx$1(SvgTrashIcon, { css: css2.removeIcon }) }),
+    /* @__PURE__ */ jsx$1(CardCheckbox, { state: disabled ? "disabled" : selected ? "selected" : "unselected", onClick: handleClick, ariaLabel: t("fitting_room.toggle_selection") }),
     /* @__PURE__ */ jsxs(Button, { variant: "base", css: /* @__PURE__ */ css$1({
       ...css2.cardBody,
       ...disabled && css2.cardBodyDisabled
@@ -42896,7 +43018,8 @@ function CardRail({
   availabilityByExternalId,
   onSelectItem,
   onRemoveItem,
-  onChangeColor
+  onChangeColor,
+  sortSelectedFirst
 }) {
   const [collapsed, setCollapsed] = reactExports.useState(false);
   const scrollRef = reactExports.useRef(null);
@@ -42967,7 +43090,7 @@ function CardRail({
     horizontal: {
       display: "flex",
       flexDirection: "row",
-      gap: "8px",
+      gap: "16px",
       overflowX: "auto",
       padding: "4px 0",
       // Native scrollbar hidden — the chevron handles are the affordance.
@@ -43000,7 +43123,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 +43995,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 +44659,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);
@@ -46649,7 +46783,124 @@ function Footer({
     /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.tfrIcon })
   ] });
 }
+const TOOLTIP_WIDTH = 240;
+const VIEWPORT_PADDING = 12;
+const ARROW_WIDTH$1 = 32;
+const ARROW_HEIGHT$1 = 16;
+const ARROW_GAP = 14;
+function FirstVisitTooltip({
+  text,
+  dismissAriaLabel,
+  onDismiss,
+  anchorRef
+}) {
+  const [pos, setPos] = reactExports.useState(null);
+  reactExports.useEffect(() => {
+    const compute = () => {
+      const anchor = anchorRef.current;
+      if (!anchor) {
+        return;
+      }
+      const rect = anchor.getBoundingClientRect();
+      const iconCentre = rect.left + rect.width / 2;
+      let left = iconCentre - TOOLTIP_WIDTH / 2;
+      const maxLeft = window.innerWidth - TOOLTIP_WIDTH - VIEWPORT_PADDING;
+      if (left > maxLeft) {
+        left = maxLeft;
+      }
+      if (left < VIEWPORT_PADDING) {
+        left = VIEWPORT_PADDING;
+      }
+      const top = rect.bottom + ARROW_GAP;
+      const arrowLeftRaw = iconCentre - left - ARROW_WIDTH$1 / 2;
+      const arrowLeftClamped = Math.max(8, Math.min(TOOLTIP_WIDTH - ARROW_WIDTH$1 - 8, arrowLeftRaw));
+      setPos({
+        left,
+        top,
+        arrowLeft: arrowLeftClamped
+      });
+    };
+    compute();
+    window.addEventListener("resize", compute);
+    window.addEventListener("scroll", compute, true);
+    return () => {
+      window.removeEventListener("resize", compute);
+      window.removeEventListener("scroll", compute, true);
+    };
+  }, [anchorRef]);
+  const css2 = useCss((theme) => ({
+    wrapper: {
+      position: "fixed",
+      width: `${TOOLTIP_WIDTH}px`,
+      zIndex: 2147483645,
+      fontFamily: theme.font_family
+    },
+    arrow: {
+      position: "absolute",
+      top: `-${ARROW_HEIGHT$1 - 1}px`,
+      width: `${ARROW_WIDTH$1}px`,
+      height: `${ARROW_HEIGHT$1}px`,
+      color: theme.color_tfr_800,
+      pointerEvents: "none"
+    },
+    body: {
+      backgroundColor: "#FFFFFF",
+      color: theme.color_tfr_800,
+      border: `2px solid ${theme.color_tfr_800}`,
+      padding: "6px 10px",
+      borderRadius: "8px",
+      boxShadow: "0 6px 20px rgba(0, 0, 0, 0.18)",
+      display: "flex",
+      alignItems: "center",
+      gap: 0
+    },
+    text: {
+      flex: 1,
+      fontSize: "13px",
+      lineHeight: "1.4",
+      color: theme.color_tfr_800,
+      textAlign: "center"
+    },
+    closeBtn: {
+      width: "20px",
+      height: "20px",
+      borderRadius: "10px",
+      border: "none",
+      backgroundColor: "transparent",
+      color: theme.color_tfr_800,
+      cursor: "pointer",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    }
+  }));
+  if (!pos) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { css: css2.wrapper, style: {
+    left: `${pos.left}px`,
+    top: `${pos.top}px`
+  }, role: "dialog", "aria-label": text, children: [
+    /* @__PURE__ */ jsx$1("svg", { css: css2.arrow, style: {
+      left: `${pos.arrowLeft}px`
+    }, viewBox: `0 0 ${ARROW_WIDTH$1} ${ARROW_HEIGHT$1}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx$1("polygon", { points: `0,${ARROW_HEIGHT$1} ${ARROW_WIDTH$1 / 2},0 ${ARROW_WIDTH$1},${ARROW_HEIGHT$1}`, fill: "currentColor" }) }),
+    /* @__PURE__ */ jsxs("div", { css: css2.body, children: [
+      /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.text, children: text }),
+      /* @__PURE__ */ jsx$1("button", { css: css2.closeBtn, onClick: onDismiss, "aria-label": dismissAriaLabel, children: /* @__PURE__ */ jsx$1("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx$1("path", { d: "M1 1L9 9M9 1L1 9", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }) })
+    ] })
+  ] });
+}
 const logger$4 = getLogger("widgets/add-to-fitting-room-compact");
+const FIRST_ADD_KEY = "tfr:first-add-tooltip-seen:v1";
+const TOOLTIP_AUTO_DISMISS_MS$1 = 1e4;
+let firstAddTooltipClaimed = false;
+const pulse$1 = keyframes`
+  0%   { box-shadow: 0 0 0 0 rgba(38, 90, 100, 0.6); }
+  70%  { box-shadow: 0 0 0 10px rgba(38, 90, 100, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(38, 90, 100, 0); }
+`;
 function AddToFittingRoomCompactWidget({
   attributes
 }) {
@@ -46665,7 +46916,60 @@ function AddToFittingRoomCompactWidget({
   const isPdp = productId != null && productId === currentProduct?.externalId;
   const productHandle = attrProductHandle || (isPdp ? currentProduct?.handle ?? null : null);
   const isInFittingRoom = useMainStore((state) => productId == null ? false : state.fittingRoom.some((item) => item.externalId === productId));
+  const [showTooltip, setShowTooltip] = reactExports.useState(false);
+  const wrapperRef = reactExports.useRef(null);
+  const buttonRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (firstAddTooltipClaimed) {
+      return;
+    }
+    try {
+      if (window.localStorage.getItem(FIRST_ADD_KEY)) {
+        return;
+      }
+    } catch (error) {
+      logger$4.logWarn("Failed to read first-add tooltip flag", {
+        error
+      });
+      return;
+    }
+    firstAddTooltipClaimed = true;
+    setShowTooltip(true);
+  }, []);
+  const dismissTooltip = reactExports.useCallback(() => {
+    setShowTooltip(false);
+    try {
+      window.localStorage.setItem(FIRST_ADD_KEY, "true");
+    } catch (error) {
+      logger$4.logWarn("Failed to write first-add tooltip flag", {
+        error
+      });
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    if (!showTooltip) {
+      return;
+    }
+    const timer = window.setTimeout(dismissTooltip, TOOLTIP_AUTO_DISMISS_MS$1);
+    return () => window.clearTimeout(timer);
+  }, [showTooltip, dismissTooltip]);
+  reactExports.useEffect(() => {
+    if (!showTooltip) {
+      return;
+    }
+    const onDocClick = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        dismissTooltip();
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [showTooltip, dismissTooltip]);
   const css2 = useCss((theme) => ({
+    wrapper: {
+      position: "relative",
+      display: "inline-block"
+    },
     button: {
       display: "inline-flex",
       alignItems: "center",
@@ -46681,6 +46985,9 @@ function AddToFittingRoomCompactWidget({
     buttonAdded: {
       backgroundColor: theme.color_fg_text
     },
+    buttonPulsing: {
+      animation: `${pulse$1} 1.8s ease-out infinite`
+    },
     icon: {
       width: "24px",
       height: "24px",
@@ -46694,6 +47001,9 @@ function AddToFittingRoomCompactWidget({
     return null;
   }
   const handleClick = () => {
+    if (showTooltip) {
+      dismissTooltip();
+    }
     toggleFittingRoomItem(productId, productHandle, isPdp).catch((error) => {
       logger$4.logError("toggleFittingRoomItem failed", {
         error
@@ -46701,9 +47011,190 @@ function AddToFittingRoomCompactWidget({
     });
   };
   const ariaLabel = t(isInFittingRoom ? "added_to_fitting_room" : "add_to_fitting_room");
-  return /* @__PURE__ */ jsx$1("button", { type: "button", onClick: handleClick, css: [css2.button, isInFittingRoom && css2.buttonAdded, "", ""], "aria-label": ariaLabel, "aria-pressed": isInFittingRoom, children: /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: [css2.icon, isInFittingRoom && css2.iconAdded, "", ""] }) });
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, css: css2.wrapper, children: [
+    /* @__PURE__ */ jsx$1("button", { ref: buttonRef, type: "button", onClick: handleClick, css: [css2.button, isInFittingRoom && css2.buttonAdded, showTooltip && css2.buttonPulsing, "", ""], "aria-label": ariaLabel, "aria-pressed": isInFittingRoom, children: /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: [css2.icon, isInFittingRoom && css2.iconAdded, "", ""] }) }),
+    showTooltip ? /* @__PURE__ */ jsx$1(FirstVisitTooltip, { text: t("first_add_tooltip.body"), dismissAriaLabel: t("first_add_tooltip.dismiss"), onDismiss: dismissTooltip, anchorRef: buttonRef }) : null
+  ] });
+}
+const ARROW_WIDTH = 32;
+const ARROW_HEIGHT = 16;
+const ARROW_RIGHT = 6;
+function AddConfirmationDrawer({
+  onDismiss,
+  onOpenOverlay,
+  onInteract
+}) {
+  const {
+    t
+  } = useTranslation();
+  const fittingRoom = useMainStore((state) => state.fittingRoom);
+  const merchantProductData = useMainStore((state) => state.merchantProductData);
+  const removeFromFittingRoom = useMainStore((state) => state.removeFromFittingRoom);
+  reactExports.useEffect(() => {
+    void loadMerchantProductData(fittingRoom);
+  }, [fittingRoom]);
+  const css2 = useCss((theme) => ({
+    wrapper: {
+      position: "absolute",
+      top: "100%",
+      right: 0,
+      marginTop: `${ARROW_HEIGHT}px`,
+      width: "320px",
+      zIndex: 2147483646,
+      fontFamily: theme.font_family
+    },
+    arrow: {
+      position: "absolute",
+      top: `-${ARROW_HEIGHT - 1}px`,
+      right: `${ARROW_RIGHT}px`,
+      width: `${ARROW_WIDTH}px`,
+      height: `${ARROW_HEIGHT}px`,
+      color: theme.color_tfr_800,
+      pointerEvents: "none"
+    },
+    drawer: {
+      width: "100%",
+      maxHeight: "480px",
+      backgroundColor: "#FFFFFF",
+      border: `3px solid ${theme.color_tfr_800}`,
+      borderRadius: "8px",
+      boxShadow: "0 6px 20px rgba(0, 0, 0, 0.18)",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    header: {
+      position: "relative",
+      padding: "12px 40px",
+      borderBottom: `1px solid rgba(0, 0, 0, 0.1)`
+    },
+    title: {
+      fontSize: "14px",
+      fontWeight: "bold",
+      textAlign: "center"
+    },
+    closeBtn: {
+      position: "absolute",
+      top: "8px",
+      right: "8px",
+      width: "24px",
+      height: "24px",
+      borderRadius: "12px",
+      border: "none",
+      backgroundColor: "transparent",
+      color: theme.color_fg_text,
+      cursor: "pointer",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    subheader: {
+      padding: "10px 14px",
+      fontSize: "12px",
+      color: theme.color_fg_text,
+      backgroundColor: "#F4F4F4",
+      textAlign: "center"
+    },
+    list: {
+      overflowY: "auto",
+      flex: 1,
+      display: "flex",
+      flexDirection: "column"
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      padding: "10px 14px",
+      borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
+    },
+    thumb: {
+      width: "48px",
+      height: "60px",
+      backgroundColor: "#F4F4F4",
+      flex: "none",
+      objectFit: "cover"
+    },
+    itemBody: {
+      flex: 1,
+      display: "flex",
+      flexDirection: "column",
+      gap: "2px",
+      minWidth: 0
+    },
+    itemName: {
+      fontSize: "13px",
+      lineHeight: "1.3",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    },
+    itemMeta: {
+      fontSize: "12px",
+      color: theme.color_fg_text,
+      opacity: 0.7
+    },
+    removeBtn: {
+      width: "32px",
+      height: "32px",
+      borderRadius: "16px",
+      border: "none",
+      backgroundColor: "transparent",
+      cursor: "pointer",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flex: "none"
+    },
+    removeIcon: {
+      width: "16px",
+      height: "16px"
+    },
+    ctaWrapper: {
+      padding: "12px 14px",
+      borderTop: `1px solid rgba(0, 0, 0, 0.1)`
+    }
+  }));
+  return /* @__PURE__ */ jsxs("div", { css: css2.wrapper, role: "dialog", "aria-label": t("add_confirmation.title"), onMouseEnter: onInteract, onPointerDown: onInteract, onFocus: onInteract, children: [
+    /* @__PURE__ */ jsx$1("svg", { css: css2.arrow, viewBox: `0 0 ${ARROW_WIDTH} ${ARROW_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ jsx$1("polygon", { points: `0,${ARROW_HEIGHT} ${ARROW_WIDTH / 2},0 ${ARROW_WIDTH},${ARROW_HEIGHT}`, fill: "currentColor" }) }),
+    /* @__PURE__ */ jsxs("div", { css: css2.drawer, children: [
+      /* @__PURE__ */ jsxs("div", { css: css2.header, children: [
+        /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.title, children: t("add_confirmation.title") }),
+        /* @__PURE__ */ jsx$1("button", { css: css2.closeBtn, onClick: onDismiss, "aria-label": t("add_confirmation.dismiss"), children: /* @__PURE__ */ jsx$1("svg", { width: "12", height: "12", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx$1("path", { d: "M1 1L9 9M9 1L1 9", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) }) })
+      ] }),
+      /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.subheader, children: t("add_confirmation.added_header") }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.list, children: fittingRoom.map((item) => {
+        const merchant = merchantProductData[item.externalId];
+        const product = merchant && !("error" in merchant) ? merchant : null;
+        const variant = product?.variants.find((v) => v.color === item.color && (!item.size || v.size === item.size)) ?? product?.variants.find((v) => v.color === item.color) ?? null;
+        const imageUrl = variant?.imageUrl ?? product?.imageUrl ?? null;
+        const name2 = product?.productName ?? item.externalId;
+        const price = variant?.priceFormatted ?? product?.variants[0]?.priceFormatted ?? null;
+        const metaParts = [item.color, price].filter(Boolean);
+        return /* @__PURE__ */ jsxs("div", { css: css2.item, children: [
+          imageUrl ? /* @__PURE__ */ jsx$1("img", { src: imageUrl, css: css2.thumb, alt: "" }) : /* @__PURE__ */ jsx$1("div", { css: css2.thumb }),
+          /* @__PURE__ */ jsxs("div", { css: css2.itemBody, children: [
+            /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.itemName, children: name2 }),
+            metaParts.length > 0 ? /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.itemMeta, children: metaParts.join(" · ") }) : null
+          ] }),
+          /* @__PURE__ */ jsx$1("button", { css: css2.removeBtn, onClick: () => removeFromFittingRoom(item.externalId), "aria-label": t("add_confirmation.remove"), children: /* @__PURE__ */ jsx$1(SvgTrashIcon, { css: css2.removeIcon }) })
+        ] }, item.externalId);
+      }) }),
+      /* @__PURE__ */ jsx$1("div", { css: css2.ctaWrapper, children: /* @__PURE__ */ jsx$1(Button, { variant: "primary", onClick: onOpenOverlay, children: t("add_confirmation.cta") }) })
+    ] })
+  ] });
 }
 const logger$3 = getLogger("widgets/fitting-room-icon");
+const DRAWER_AUTO_DISMISS_MS = 6e3;
+const TOOLTIP_AUTO_DISMISS_MS = 1e4;
+const FIRST_VISIT_KEY = "tfr:first-visit-tooltip-seen:v1";
+const pulse = keyframes`
+  0%   { box-shadow: 0 0 0 0 rgba(38, 90, 100, 0.6); }
+  70%  { box-shadow: 0 0 0 10px rgba(38, 90, 100, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(38, 90, 100, 0); }
+`;
 function FittingRoomIconWidget(_props) {
   const {
     t
@@ -46712,7 +47203,85 @@ function FittingRoomIconWidget(_props) {
   const isOpen = useMainStore((state) => state.activeOverlay === OverlayName.FITTING_ROOM);
   const openOverlay = useMainStore((state) => state.openOverlay);
   const closeOverlay = useMainStore((state) => state.closeOverlay);
+  const lastAddEvent = useMainStore((state) => state.lastAddEvent);
+  const [drawerOpen, setDrawerOpen] = reactExports.useState(false);
+  const [showTooltip, setShowTooltip] = reactExports.useState(false);
+  const wrapperRef = reactExports.useRef(null);
+  const buttonRef = reactExports.useRef(null);
+  const drawerAutoDismissTimerRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    try {
+      if (!window.localStorage.getItem(FIRST_VISIT_KEY)) {
+        setShowTooltip(true);
+      }
+    } catch (error) {
+      logger$3.logWarn("Failed to read first-visit flag", {
+        error
+      });
+    }
+  }, []);
+  const dismissTooltip = reactExports.useCallback(() => {
+    setShowTooltip(false);
+    try {
+      window.localStorage.setItem(FIRST_VISIT_KEY, "true");
+    } catch (error) {
+      logger$3.logWarn("Failed to write first-visit flag", {
+        error
+      });
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    if (!showTooltip) {
+      return;
+    }
+    const timer = window.setTimeout(dismissTooltip, TOOLTIP_AUTO_DISMISS_MS);
+    return () => window.clearTimeout(timer);
+  }, [showTooltip, dismissTooltip]);
+  const cancelDrawerAutoDismiss = reactExports.useCallback(() => {
+    if (drawerAutoDismissTimerRef.current !== null) {
+      window.clearTimeout(drawerAutoDismissTimerRef.current);
+      drawerAutoDismissTimerRef.current = null;
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    if (!lastAddEvent) {
+      return;
+    }
+    setDrawerOpen(true);
+    cancelDrawerAutoDismiss();
+    drawerAutoDismissTimerRef.current = window.setTimeout(() => {
+      setDrawerOpen(false);
+      drawerAutoDismissTimerRef.current = null;
+    }, DRAWER_AUTO_DISMISS_MS);
+    return cancelDrawerAutoDismiss;
+  }, [lastAddEvent, cancelDrawerAutoDismiss]);
+  reactExports.useEffect(() => {
+    if (!drawerOpen && !showTooltip) {
+      return;
+    }
+    const onDocClick = (e) => {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        if (drawerOpen) {
+          setDrawerOpen(false);
+        }
+        if (showTooltip) {
+          dismissTooltip();
+        }
+      }
+    };
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [drawerOpen, showTooltip, dismissTooltip]);
+  reactExports.useEffect(() => {
+    if (drawerOpen && count === 0) {
+      setDrawerOpen(false);
+    }
+  }, [drawerOpen, count]);
   const css2 = useCss((theme) => ({
+    wrapper: {
+      position: "relative",
+      display: "inline-block"
+    },
     button: {
       position: "relative",
       display: "inline-flex",
@@ -46726,6 +47295,10 @@ function FittingRoomIconWidget(_props) {
       cursor: "pointer",
       color: "inherit"
     },
+    buttonPulsing: {
+      borderRadius: "50%",
+      animation: `${pulse} 1.8s ease-out infinite`
+    },
     icon: {
       width: "24px",
       height: "24px",
@@ -46748,6 +47321,9 @@ function FittingRoomIconWidget(_props) {
     }
   }));
   const handleClick = () => {
+    if (showTooltip) {
+      dismissTooltip();
+    }
     if (isOpen) {
       logger$3.logDebug("{{ts}} - Closing fitting room overlay", {
         count
@@ -46759,10 +47335,21 @@ function FittingRoomIconWidget(_props) {
       count
     });
     openOverlay(OverlayName.FITTING_ROOM);
+    setDrawerOpen(false);
   };
-  return /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleClick, css: css2.button, "aria-label": t("view_fitting_room"), children: [
-    /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: css2.icon }),
-    count > 0 && /* @__PURE__ */ jsx$1("span", { css: css2.badge, children: count })
+  const handleOpenFromDrawer = () => {
+    openOverlay(OverlayName.FITTING_ROOM);
+    setDrawerOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, css: css2.wrapper, children: [
+    /* @__PURE__ */ jsxs("button", { ref: buttonRef, type: "button", onClick: handleClick, css: /* @__PURE__ */ css$1({
+      ...css2.button,
+      ...showTooltip && !drawerOpen ? css2.buttonPulsing : {}
+    }, "", ""), "aria-label": t("view_fitting_room"), children: [
+      /* @__PURE__ */ jsx$1(SvgFittingRoomIcon, { css: css2.icon }),
+      count > 0 && /* @__PURE__ */ jsx$1("span", { css: css2.badge, children: count })
+    ] }),
+    drawerOpen ? /* @__PURE__ */ jsx$1(AddConfirmationDrawer, { onDismiss: () => setDrawerOpen(false), onOpenOverlay: handleOpenFromDrawer, onInteract: cancelDrawerAutoDismiss }) : showTooltip ? /* @__PURE__ */ jsx$1(FirstVisitTooltip, { text: t("first_visit_tooltip.body"), dismissAriaLabel: t("first_visit_tooltip.dismiss"), onDismiss: dismissTooltip, anchorRef: buttonRef }) : null
   ] });
 }
 const logger$2 = getLogger("widgets/fitting-room");
@@ -47146,6 +47733,13 @@ const useMainStore = create((set) => ({
       fittingRoom: []
     };
   }),
+  lastAddEvent: null,
+  setLastAddEvent: (externalId) => set({
+    lastAddEvent: {
+      externalId,
+      at: Date.now()
+    }
+  }),
   // UI state:
   activeOverlay: null,
   activeOverlayProps: null,
@@ -47202,9 +47796,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.32"}`,
+    commitHash: `${"1e960c2"}`,
+    date: `${"2026-06-28T19:41:53.726Z"}`
   }
 };
 const CONFIGS = {

package/package.json

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