@lime-bundles/react 6.2.0 → 7.1.0

package/dist/index.js

@@ -81,13 +81,10 @@ async function fetchBundleDataWithWarnings(options) {
 // src/fetchShopSettings.ts
 import {
   createStorefrontClient as createStorefrontClient2,
-  SHOP_SETTINGS_QUERY,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR,
-  parseOutOfStockBehavior
+  SHOP_SETTINGS_QUERY
 } from "@lime-bundles/core";
 var FALLBACK = {
-  customCss: null,
-  outOfStockBehavior: DEFAULT_OUT_OF_STOCK_BEHAVIOR
+  customCss: null
 };
 var cache = /* @__PURE__ */ new Map();
 async function fetchShopSettings(options) {
@@ -105,10 +102,7 @@ async function fetchShopSettings(options) {
       { signal: options.signal }
     );
     return {
-      customCss: data.shop?.customCss?.value ?? null,
-      outOfStockBehavior: parseOutOfStockBehavior(
-        data.shop?.outOfStockBehavior?.value
-      )
+      customCss: data.shop?.customCss?.value ?? null
     };
   })();
   cache.set(options.shopDomain, promise);
@@ -266,19 +260,25 @@ function useWidgetConfigVars(config) {
 import { useEffect as useEffect4, useMemo as useMemo2, useState as useState3, useCallback as useCallback3 } from "react";
 import { variants as variantsNs } from "@lime-bundles/core";
 var { findVariantByOptions, isOptionValueAvailable, toPickerVariant } = variantsNs;
-function defaultInitial(variants) {
-  return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
-}
 function useVariantSelection({
   variants,
   optionNames,
   initialVariant,
-  optionValuesByPosition
+  optionValuesByPosition,
+  requiredQtyFor
 }) {
-  const seed = useMemo2(
-    () => initialVariant ?? defaultInitial(variants),
-    [initialVariant, variants]
+  const pickerVariants = useMemo2(
+    () => variants.map((v) => toPickerVariant(v, requiredQtyFor?.(v.id))),
+    [variants, requiredQtyFor]
   );
+  const seed = useMemo2(() => {
+    if (initialVariant) return initialVariant;
+    const covered = pickerVariants.find((p) => p.available);
+    if (covered) {
+      return variants.find((v) => v.id === covered.id) ?? null;
+    }
+    return variants.find((v) => v.availableForSale) ?? variants[0] ?? null;
+  }, [initialVariant, variants, pickerVariants]);
   const [selectedValues, setSelectedValues] = useState3(
     () => seed ? seed.selectedOptions.map((o) => o.value) : optionNames.map(() => "")
   );
@@ -286,10 +286,6 @@ function useVariantSelection({
     if (!seed) return;
     setSelectedValues(seed.selectedOptions.map((o) => o.value));
   }, [seed?.id]);
-  const pickerVariants = useMemo2(
-    () => variants.map((v) => toPickerVariant(v)),
-    [variants]
-  );
   const selectedVariant = useMemo2(() => {
     if (selectedValues.length !== optionNames.length) return null;
     const match = findVariantByOptions(pickerVariants, selectedValues);
@@ -924,7 +920,11 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
   const showPicker = variants.length > 1 && optionNames.length > 0;
   const { selectedValues, selectedVariant, setOptionValue, optionsFor } = useVariantSelection({
     variants,
-    optionNames
+    optionNames,
+    // Quantity-aware dropdown: a variant that can't cover this row's
+    // bundle quantity greys out instead of walking the shopper into a
+    // cart Shopify caps at add time.
+    requiredQtyFor: (variantId) => resolveBundleQty(bundle, product.id, variantId)
   });
   useEffect7(() => {
     onVariantChange(product.id, selectedVariant ?? null);
@@ -1019,7 +1019,7 @@ function FixedProductRow({ bundle, product, currency, isOos, onVariantChange })
 }
 
 // src/components/MixMatchBundle.tsx
-import { useCallback as useCallback6, useEffect as useEffect12, useMemo as useMemo6, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo6, useState as useState8 } from "react";
 import {
   formatMoney as formatMoney3,
   formatUnitPrice as formatUnitPrice3,
@@ -1028,39 +1028,12 @@ import {
   DEFAULT_PRODUCT_RULE as DEFAULT_PRODUCT_RULE2
 } from "@lime-bundles/core";
 
-// src/hooks/useShopSettings.ts
-import { useEffect as useEffect8, useState as useState7 } from "react";
-import {
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR2
-} from "@lime-bundles/core";
-function useShopSettings(options) {
-  const [outOfStockBehavior, setOutOfStockBehavior] = useState7(DEFAULT_OUT_OF_STOCK_BEHAVIOR2);
-  const { shopDomain, storefrontAccessToken } = options;
-  useEffect8(() => {
-    const controller = new AbortController();
-    let active = true;
-    fetchShopSettingsOrDefault({
-      shopDomain,
-      storefrontAccessToken,
-      signal: controller.signal
-    }).then((settings) => {
-      if (!active || controller.signal.aborted) return;
-      setOutOfStockBehavior(settings.outOfStockBehavior);
-    });
-    return () => {
-      active = false;
-      controller.abort();
-    };
-  }, [shopDomain, storefrontAccessToken]);
-  return { outOfStockBehavior };
-}
-
 // src/components/MixMatchPicker.tsx
 import {
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useMemo as useMemo5,
   useRef as useRef6,
-  useState as useState8
+  useState as useState7
 } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -1072,7 +1045,7 @@ import {
 } from "@lime-bundles/core";
 
 // src/hooks/useScrollLock.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect8 } from "react";
 var lockCount = 0;
 var savedY = 0;
 function lock() {
@@ -1101,7 +1074,7 @@ function unlock() {
   window.scrollTo(0, savedY);
 }
 function useScrollLock(active) {
-  useEffect9(() => {
+  useEffect8(() => {
     if (!active) return;
     lock();
     return unlock;
@@ -1109,7 +1082,7 @@ function useScrollLock(active) {
 }
 
 // src/hooks/useFocusTrap.ts
-import { useEffect as useEffect10, useRef as useRef5 } from "react";
+import { useEffect as useEffect9, useRef as useRef5 } from "react";
 var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -1132,14 +1105,16 @@ function useFocusTrap({
   active,
   containerRef,
   onEscape,
+  initialFocusRef,
   returnFocusRef
 }) {
   const previouslyFocused = useRef5(null);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!active) return;
     const container = containerRef.current;
     previouslyFocused.current = document.activeElement ?? null;
-    container?.focus();
+    const initial = initialFocusRef?.current ?? container;
+    initial?.focus();
     function onKeyDown(e) {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -1191,7 +1166,7 @@ function variantRuleFor(bundle, variantId) {
 function sanitizeId(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function buildEligibleProducts(bundle, oosBehavior) {
+function buildEligibleProducts(bundle) {
   const result = [];
   const seen = /* @__PURE__ */ new Set();
   for (const product of bundle.products) {
@@ -1202,7 +1177,6 @@ function buildEligibleProducts(bundle, oosBehavior) {
       (v) => isVariantFulfillable2(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -1217,7 +1191,6 @@ function normalizeText(str) {
 }
 var FILTERS_ALL = "__all__";
 function MixMatchPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   requiredQty,
@@ -1235,13 +1208,14 @@ function MixMatchPicker({
   const wc = bundle.widgetConfig;
   const overlayRef = useRef6(null);
   const dialogRef = useRef6(null);
+  const closeBtnRef = useRef6(null);
   const mouseDownTarget = useRef6(null);
-  const [open, setOpen] = useState8(false);
-  const [query, setQuery] = useState8("");
-  const [activeType, setActiveType] = useState8(FILTERS_ALL);
+  const [open, setOpen] = useState7(false);
+  const [query, setQuery] = useState7("");
+  const [activeType, setActiveType] = useState7(FILTERS_ALL);
   const eligible = useMemo5(
-    () => buildEligibleProducts(bundle, outOfStockBehavior),
-    [bundle, outOfStockBehavior]
+    () => buildEligibleProducts(bundle),
+    [bundle]
   );
   const productTypes = useMemo5(() => {
     const types = [];
@@ -1259,7 +1233,7 @@ function MixMatchPicker({
   const totalUnits = selections.reduce((sum, s) => sum + s.quantity, 0);
   const atCapacity = totalUnits >= requiredQty;
   const shownUnits = Math.min(totalUnits, requiredQty);
-  useEffect11(() => {
+  useEffect10(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -1267,6 +1241,7 @@ function MixMatchPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
   const remaining = Math.max(0, requiredQty - shownUnits);
@@ -1275,14 +1250,25 @@ function MixMatchPicker({
     const pct = bundle.discountConfig.discountType === "percentage" && bundle.discountConfig.discountValue ? Math.round(bundle.discountConfig.discountValue) : 0;
     return pct > 0 ? `Choose ${remaining} more to unlock ${pct}% off` : `Choose ${remaining} more to complete your bundle`;
   })();
+  const [selectedAtOpen] = useState7(
+    () => new Set(selections.map((s) => s.productId))
+  );
+  const ordered = useMemo5(() => {
+    const front = [];
+    const back = [];
+    for (const ep of eligible) {
+      (selectedAtOpen.has(ep.product.id) ? back : front).push(ep);
+    }
+    return front.concat(back);
+  }, [eligible, selectedAtOpen]);
   const filtered = useMemo5(() => {
     const nq = normalizeText(query.trim());
-    return eligible.filter((ep) => {
+    return ordered.filter((ep) => {
       const matchesQuery = !nq || normalizeText(ep.product.title).includes(nq);
       const matchesType = activeType === FILTERS_ALL || (ep.product.productType ?? "") === activeType;
       return matchesQuery && matchesType;
     });
-  }, [eligible, query, activeType]);
+  }, [ordered, query, activeType]);
   const showEmpty = filtered.length === 0 && query.trim().length > 0;
   function onOverlayMouseDown(e) {
     mouseDownTarget.current = e.target;
@@ -1331,6 +1317,7 @@ function MixMatchPicker({
                   /* @__PURE__ */ jsx4(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
@@ -1533,12 +1520,12 @@ function MixMatchPickerRow({
     Math.max(0, alreadyInBundle - committedQty)
   ) : 0;
   const stepperMax = Math.max(vRule.min, cap);
-  const [qty, setQty] = useState8(vRule.min);
-  useEffect11(() => {
+  const [qty, setQty] = useState7(vRule.min);
+  useEffect10(() => {
     setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
   }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  useEffect11(() => {
+  useEffect10(() => {
     if (!variantInBundle) setQty(vRule.min);
   }, [variantInBundle, currentVariantId, vRule.min]);
   if (!currentVariant) return null;
@@ -1800,10 +1787,6 @@ function MixMatchBundle(props) {
     storefrontAccessToken,
     bundleGid
   });
-  const { outOfStockBehavior } = useShopSettings({
-    shopDomain,
-    storefrontAccessToken
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -1811,16 +1794,16 @@ function MixMatchBundle(props) {
     bundleType: "mix_match",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = useState9([]);
-  const [seededFor, setSeededFor] = useState9(null);
-  const [pickerOpen, setPickerOpen] = useState9(false);
-  const [addingToCart, setAddingToCart] = useState9(false);
-  const [cartError, setCartError] = useState9(null);
+  const [selections, setSelections] = useState8([]);
+  const [seededFor, setSeededFor] = useState8(null);
+  const [pickerOpen, setPickerOpen] = useState8(false);
+  const [addingToCart, setAddingToCart] = useState8(false);
+  const [cartError, setCartError] = useState8(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "mix_match" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const slotsEdgeFadeRef = useEdgeFade();
-  useEffect12(() => {
+  useEffect11(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -1833,7 +1816,7 @@ function MixMatchBundle(props) {
       );
     }
   }, [result, onError]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!bundle || seededFor === bundle.id) return;
     setSeededFor(bundle.id);
     const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
@@ -2243,7 +2226,6 @@ function MixMatchBundle(props) {
         pickerOpen && /* @__PURE__ */ jsx5(
           MixMatchPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             requiredQty: requiredUnits,
@@ -2316,7 +2298,7 @@ function CloseIcon2() {
 }
 
 // src/components/VolumeBundle.tsx
-import { useCallback as useCallback7, useEffect as useEffect13, useMemo as useMemo7, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect12, useMemo as useMemo7, useState as useState9 } from "react";
 import {
   formatMoney as formatMoney4,
   formatUnitPrice as formatUnitPrice4,
@@ -2327,6 +2309,7 @@ import {
   resolveDefaultTierIndex,
   resolvePopularTierIndex,
   isVariantFulfillable as isVariantFulfillable4,
+  resolveContextProduct,
   shouldShowLowStockBadge as shouldShowLowStockBadge2
 } from "@lime-bundles/core";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -2339,7 +2322,8 @@ function VolumeBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    productId
   } = props;
   const result = useBundleData({
     shopDomain,
@@ -2353,12 +2337,12 @@ function VolumeBundle(props) {
     bundleType: "volume",
     enabled: analyticsEnabled !== false
   });
-  const [quantity, setQuantity] = useState10(1);
-  const [addingToCart, setAddingToCart] = useState10(false);
-  const [cartError, setCartError] = useState10(null);
-  const [seededFor, setSeededFor] = useState10(null);
+  const [quantity, setQuantity] = useState9(1);
+  const [addingToCart, setAddingToCart] = useState9(false);
+  const [cartError, setCartError] = useState9(null);
+  const [seededFor, setSeededFor] = useState9(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "volume" ? result.bundle : null;
-  useEffect13(() => {
+  useEffect12(() => {
     if (!bundle || seededFor === bundle.id) return;
     setSeededFor(bundle.id);
     const tiers = bundle.volumeTiers;
@@ -2376,7 +2360,7 @@ function VolumeBundle(props) {
   }, [bundle, seededFor]);
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const tiersEdgeFadeRef = useEdgeFade();
-  useEffect13(() => {
+  useEffect12(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2389,7 +2373,7 @@ function VolumeBundle(props) {
       );
     }
   }, [result, onError]);
-  const product = bundle?.products[0];
+  const product = bundle ? resolveContextProduct(bundle.products, { productId }) : void 0;
   const variants = useMemo7(() => product?.variants.nodes ?? [], [product]);
   const optionNames = useMemo7(() => {
     const first = variants[0];
@@ -2400,6 +2384,11 @@ function VolumeBundle(props) {
   const minTierQty = bundle ? getMinTierQuantity(bundle.volumeTiers) : 1;
   const isSoldOut = variants.length > 0 && !variants.some((v) => isVariantFulfillable4(v, minTierQty));
   const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable4(v, minTierQty)) ?? variants[0];
+  const tierAvailable = useCallback7(
+    (tierQty) => Boolean(displayVariant && isVariantFulfillable4(displayVariant, tierQty)),
+    [displayVariant]
+  );
+  const selectedTierUnavailable = !isSoldOut && !tierAvailable(quantity);
   const basePrice = displayVariant ? parseFloat(displayVariant.price.amount) : product ? parseFloat(product.priceRange.minVariantPrice.amount) : 0;
   const currency = product?.priceRange.minVariantPrice.currencyCode ?? "USD";
   const thumbImage = displayVariant?.image ?? product?.featuredImage ?? null;
@@ -2557,16 +2546,20 @@ function VolumeBundle(props) {
               const savingsPercent = Math.round(ts.savingsPercent);
               const showCompare = bundle.widgetConfig.pricing.showComparePrice && ts.savings > 0;
               const isChecked = activeTier === ts.tier;
+              const available = tierAvailable(ts.tier.minQuantity);
               return /* @__PURE__ */ jsxs6(
                 "div",
                 {
-                  className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""}`,
+                  className: `lb-bundle__tier ${ts.isActive ? "lb-bundle__tier--active" : ""} ${available ? "" : "lb-bundle__tier--oos"}`,
                   role: "radio",
                   "aria-checked": isChecked,
+                  "aria-disabled": available ? void 0 : true,
                   tabIndex: isChecked ? 0 : -1,
-                  onClick: () => setQuantity(ts.tier.minQuantity),
+                  onClick: () => {
+                    if (available) setQuantity(ts.tier.minQuantity);
+                  },
                   onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
+                    if ((e.key === "Enter" || e.key === " ") && available) {
                       e.preventDefault();
                       setQuantity(ts.tier.minQuantity);
                     }
@@ -2681,9 +2674,9 @@ function VolumeBundle(props) {
           {
             className: "lb-bundle__cta",
             onClick: handleAddToCart,
-            disabled: addingToCart || isSoldOut,
+            disabled: addingToCart || isSoldOut || selectedTierUnavailable,
             "aria-busy": addingToCart,
-            children: addingToCart ? "Adding..." : isSoldOut ? "Sold out" : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
+            children: addingToCart ? "Adding..." : isSoldOut || selectedTierUnavailable ? "Sold out" : bundle.widgetConfig.cta.ctaText ?? `Add ${quantity} to Cart`
           }
         )
       ]
@@ -2692,7 +2685,7 @@ function VolumeBundle(props) {
 }
 
 // src/components/BogoBundle.tsx
-import { useCallback as useCallback8, useEffect as useEffect14, useMemo as useMemo8, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect13, useMemo as useMemo8, useState as useState10 } from "react";
 import {
   formatMoney as formatMoney5,
   formatUnitPrice as formatUnitPrice5,
@@ -2727,9 +2720,9 @@ function BogoBundle(props) {
     bundleType: "bogo",
     enabled: analyticsEnabled !== false
   });
-  const [addingToCart, setAddingToCart] = useState11(false);
-  const [cartError, setCartError] = useState11(null);
-  const [selectedVariants, setSelectedVariants] = useState11({ buy: null, get: null });
+  const [addingToCart, setAddingToCart] = useState10(false);
+  const [cartError, setCartError] = useState10(null);
+  const [selectedVariants, setSelectedVariants] = useState10({ buy: null, get: null });
   const handleVariantChange = useCallback8(
     (role, variant) => {
       setSelectedVariants((prev) => {
@@ -2741,7 +2734,7 @@ function BogoBundle(props) {
   );
   const bundle = result.status === "success" && result.bundle.bundleType === "bogo" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect14(() => {
+  useEffect13(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -2940,7 +2933,7 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
     variants,
     optionNames
   });
-  useEffect14(() => {
+  useEffect13(() => {
     onVariantChange(side, selectedVariant ?? null);
   }, [selectedVariant, side, onVariantChange]);
   const displayVariant = selectedVariant ?? variants.find((v) => isVariantFulfillable5(v, quantity)) ?? variants[0];
@@ -3013,7 +3006,7 @@ function BogoProductRow({ side, product, quantity, percent, badge, currency, onV
 }
 
 // src/components/MultiStepBundle.tsx
-import { useCallback as useCallback9, useEffect as useEffect16, useMemo as useMemo10, useState as useState13 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo10, useState as useState12 } from "react";
 import {
   formatMoney as formatMoney7,
   formatUnitPrice as formatUnitPrice7,
@@ -3026,10 +3019,10 @@ import {
 
 // src/components/MultiStepPicker.tsx
 import {
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   useMemo as useMemo9,
   useRef as useRef7,
-  useState as useState12
+  useState as useState11
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import {
@@ -3055,7 +3048,7 @@ function variantRuleFor3(bundle, variantId) {
 function sanitizeId2(gid) {
   return gid.replace(/[^a-zA-Z0-9_-]/g, "-");
 }
-function buildEligibleProducts2(bundle, stepIndex, oosBehavior) {
+function buildEligibleProducts2(bundle, stepIndex) {
   const result = [];
   for (const product of productsForStep(bundle, stepIndex)) {
     const rule = ruleFor3(bundle, product.id);
@@ -3063,7 +3056,6 @@ function buildEligibleProducts2(bundle, stepIndex, oosBehavior) {
       (v) => isVariantFulfillable6(v, rule.min)
     );
     const isOos = available.length === 0;
-    if (isOos && oosBehavior === "hide") continue;
     result.push({
       product,
       variants: product.variants.nodes,
@@ -3078,7 +3070,6 @@ function normalizeText2(str) {
 }
 var FILTERS_ALL2 = "__all__";
 function MultiStepPicker({
-  outOfStockBehavior,
   bundle,
   currency,
   initialStep,
@@ -3098,14 +3089,16 @@ function MultiStepPicker({
   const overlayRef = useRef7(null);
   const dialogRef = useRef7(null);
   const titleRef = useRef7(null);
+  const closeBtnRef = useRef7(null);
+  const listRef = useRef7(null);
   const mouseDownTarget = useRef7(null);
-  const [open, setOpen] = useState12(false);
-  const [stepIndex, setStepIndex] = useState12(
+  const [open, setOpen] = useState11(false);
+  const [stepIndex, setStepIndex] = useState11(
     () => Math.max(0, Math.min(steps.length - 1, initialStep))
   );
-  const [query, setQuery] = useState12("");
-  const [activeType, setActiveType] = useState12(FILTERS_ALL2);
-  const [announcement, setAnnouncement] = useState12("");
+  const [query, setQuery] = useState11("");
+  const [activeType, setActiveType] = useState11(FILTERS_ALL2);
+  const [announcement, setAnnouncement] = useState11("");
   const step = steps[stepIndex];
   const stepMin = step?.minQuantity ?? 1;
   const stepPicks = selections[stepIndex] ?? [];
@@ -3114,8 +3107,8 @@ function MultiStepPicker({
   const isLastStep = stepIndex === steps.length - 1;
   const shownUnits = Math.min(unitsInStep, stepMin);
   const eligible = useMemo9(
-    () => buildEligibleProducts2(bundle, stepIndex, outOfStockBehavior),
-    [bundle, stepIndex, outOfStockBehavior]
+    () => buildEligibleProducts2(bundle, stepIndex),
+    [bundle, stepIndex]
   );
   const productTypes = useMemo9(() => {
     const types = [];
@@ -3130,7 +3123,7 @@ function MultiStepPicker({
     return types;
   }, [eligible]);
   const showFilters = wc.mixMatchShowTypeFilters && productTypes.length >= 2;
-  useEffect15(() => {
+  useEffect14(() => {
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -3138,8 +3131,23 @@ function MultiStepPicker({
   useFocusTrap({
     active: true,
     containerRef: dialogRef,
+    initialFocusRef: closeBtnRef,
     onEscape: onClose
   });
+  useEffect14(() => {
+    if (listRef.current) listRef.current.scrollTop = 0;
+  }, [stepIndex]);
+  const [selectedAtLoad, setSelectedAtLoad] = useState11(
+    () => new Set((selections[stepIndex] ?? []).map((s) => s.productId))
+  );
+  const ordered = useMemo9(() => {
+    const front = [];
+    const back = [];
+    for (const ep of eligible) {
+      (selectedAtLoad.has(ep.product.id) ? back : front).push(ep);
+    }
+    return front.concat(back);
+  }, [eligible, selectedAtLoad]);
   function goToStep(i) {
     const clamped = Math.max(0, Math.min(steps.length - 1, i));
     setStepIndex(clamped);
@@ -3147,6 +3155,7 @@ function MultiStepPicker({
     setActiveType(FILTERS_ALL2);
     const target = steps[clamped];
     const targetPicks = selections[clamped] ?? [];
+    setSelectedAtLoad(new Set(targetPicks.map((s) => s.productId)));
     const targetUnits = targetPicks.reduce((sum, s) => sum + s.quantity, 0);
     setAnnouncement(
       `Step ${clamped + 1} of ${steps.length}. ${target.name}. ${Math.min(targetUnits, target.minQuantity)} of ${target.minQuantity} added`
@@ -3156,12 +3165,12 @@ function MultiStepPicker({
   const subtitle = `Step ${stepIndex + 1} of ${steps.length} \xB7 ${step?.name ?? ""}`;
   const filtered = useMemo9(() => {
     const nq = normalizeText2(query.trim());
-    return eligible.filter((ep) => {
+    return ordered.filter((ep) => {
       const matchesQuery = !nq || normalizeText2(ep.product.title).includes(nq);
       const matchesType = activeType === FILTERS_ALL2 || (ep.product.productType ?? "") === activeType;
       return matchesQuery && matchesType;
     });
-  }, [eligible, query, activeType]);
+  }, [ordered, query, activeType]);
   const showEmpty = filtered.length === 0 && query.trim().length > 0;
   function onOverlayMouseDown(e) {
     mouseDownTarget.current = e.target;
@@ -3219,6 +3228,7 @@ function MultiStepPicker({
                   /* @__PURE__ */ jsx8(
                     "button",
                     {
+                      ref: closeBtnRef,
                       type: "button",
                       className: "lb-mix-match__modal-close",
                       "data-modal-close": true,
@@ -3306,7 +3316,7 @@ function MultiStepPicker({
                   })
                 }
               ),
-              /* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, children: filtered.map((ep) => /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx8("div", { className: "lb-mix-match__modal-list", "data-modal-list": true, ref: listRef, children: filtered.map((ep) => /* @__PURE__ */ jsx8(
                 MultiStepPickerRow,
                 {
                   bundle,
@@ -3453,12 +3463,12 @@ function MultiStepPickerRow({
   const stockRemaining = currentVariant ? maxAddableQuantity2(currentVariant, Number.MAX_SAFE_INTEGER, variantOtherUnits) : 0;
   const cap = Math.max(0, Math.min(spotCeiling, stockRemaining));
   const stepperMax = Math.max(vRule.min, cap);
-  const [qty, setQty] = useState12(vRule.min);
-  useEffect15(() => {
+  const [qty, setQty] = useState11(vRule.min);
+  useEffect14(() => {
     setQty((prev) => Math.max(vRule.min, Math.min(prev, stepperMax)));
   }, [stepperMax, vRule.min]);
   const currentVariantId = currentVariant?.id ?? null;
-  useEffect15(() => {
+  useEffect14(() => {
     if (!variantInStep) setQty(vRule.min);
   }, [variantInStep, currentVariantId, vRule.min]);
   if (!currentVariant || !step) return null;
@@ -3729,10 +3739,6 @@ function MultiStepBundle(props) {
     storefrontAccessToken,
     bundleGid
   });
-  const { outOfStockBehavior } = useShopSettings({
-    shopDomain,
-    storefrontAccessToken
-  });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
     appUrl: appUrl ?? `https://${shopDomain}`,
@@ -3740,14 +3746,14 @@ function MultiStepBundle(props) {
     bundleType: "multi_step",
     enabled: analyticsEnabled !== false
   });
-  const [selections, setSelections] = useState13([]);
-  const [pickerOpenAt, setPickerOpenAt] = useState13(null);
-  const [addingToCart, setAddingToCart] = useState13(false);
-  const [cartError, setCartError] = useState13(null);
+  const [selections, setSelections] = useState12([]);
+  const [pickerOpenAt, setPickerOpenAt] = useState12(null);
+  const [addingToCart, setAddingToCart] = useState12(false);
+  const [cartError, setCartError] = useState12(null);
   const bundle = result.status === "success" && result.bundle.bundleType === "multi_step" ? result.bundle : null;
   const setConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
   const setModalConfigVarsRef = useWidgetConfigVars(bundle?.widgetConfig);
-  useEffect16(() => {
+  useEffect15(() => {
     if (result.status === "error") {
       onError?.(result.error);
       return;
@@ -3761,7 +3767,7 @@ function MultiStepBundle(props) {
     }
   }, [result, onError]);
   const steps = useMemo10(() => bundle?.steps ?? [], [bundle]);
-  useEffect16(() => {
+  useEffect15(() => {
     const seeded = steps.map(() => []);
     if (bundle) {
       const seedCurrency = bundle.products[0]?.priceRange.minVariantPrice.currencyCode ?? "USD";
@@ -4201,7 +4207,6 @@ function MultiStepBundle(props) {
         pickerOpenAt !== null && /* @__PURE__ */ jsx9(
           MultiStepPicker,
           {
-            outOfStockBehavior,
             bundle,
             currency,
             initialStep: pickerOpenAt,
@@ -4275,7 +4280,7 @@ async function fetchShopCustomCss(options) {
 }
 
 // src/hooks/useBundlesForProduct.ts
-import { useState as useState14, useEffect as useEffect17 } from "react";
+import { useState as useState13, useEffect as useEffect16 } from "react";
 import {
   fetchBundlesForProduct,
   injectCustomCss as injectCustomCss2
@@ -4286,10 +4291,10 @@ var INITIAL_STATE2 = {
   error: null
 };
 function useBundlesForProduct(options) {
-  const [state, setState] = useState14(
+  const [state, setState] = useState13(
     INITIAL_STATE2
   );
-  useEffect17(() => {
+  useEffect16(() => {
     const controller = new AbortController();
     setState(INITIAL_STATE2);
     fetchBundlesForProduct({
@@ -4363,9 +4368,7 @@ import {
   parseMetaobjectBundleStrict as parseMetaobjectBundleStrict2,
   BUNDLE_METAOBJECT_QUERY as BUNDLE_METAOBJECT_QUERY2,
   BUNDLES_FOR_PRODUCT_QUERY,
-  SHOP_SETTINGS_QUERY as SHOP_SETTINGS_QUERY2,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR as DEFAULT_OUT_OF_STOCK_BEHAVIOR3,
-  parseOutOfStockBehavior as parseOutOfStockBehavior2
+  SHOP_SETTINGS_QUERY as SHOP_SETTINGS_QUERY2
 } from "@lime-bundles/core";
 export {
   BUNDLES_FOR_PRODUCT_QUERY,
@@ -4373,7 +4376,6 @@ export {
   BogoBundle,
   BundleCountdown,
   BundleParseError2 as BundleParseError,
-  DEFAULT_OUT_OF_STOCK_BEHAVIOR3 as DEFAULT_OUT_OF_STOCK_BEHAVIOR,
   FixedBundle,
   MixMatchBundle,
   MultiStepBundle,
@@ -4404,7 +4406,6 @@ export {
   parseCents,
   parseMetaobjectBundle,
   parseMetaobjectBundleStrict2 as parseMetaobjectBundleStrict,
-  parseOutOfStockBehavior2 as parseOutOfStockBehavior,
   percentageDiscountUnit,
   productsForStep3 as productsForStep,
   reportAddToCart2 as reportAddToCart,
@@ -4416,7 +4417,6 @@ export {
   useAnalytics,
   useBundleData,
   useBundlesForProduct,
-  useShopSettings,
   useVariantSelection,
   useWidgetConfigVars,
   validateQuantity