@rpg-engine/long-bow 0.8.219 → 0.8.220

package/dist/long-bow.esm.js

@@ -2,11 +2,11 @@ import React, { useState, useEffect, Component, useRef, useCallback, useMemo, me
 import styled, { css, createGlobalStyle, keyframes } from 'styled-components';
 import { BeatLoader } from 'react-spinners';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, DC_TO_GOLD_SWAP_RATE, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, MarketplaceAcceptedCurrency, formatDCAmount, goldToDC, MarketplaceTransactionType, CharacterClass as CharacterClass$2, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemQualityLevel, ItemRarities, ItemSubType, isMobile, TaskType, TaskStatus, isMobileOrTablet, RewardType, DC_TO_GOLD_SWAP_RATE, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, MarketplaceBuyOrderStatus, MarketplaceAcceptedCurrency, formatDCAmount, goldToDC, MarketplaceTransactionType, CharacterClass as CharacterClass$2, QuestStatus, getLevelFromXP, getSkillConstants, getLevelFromSPTiered, getXPForLevel, getSPForLevelTiered, MetadataType, PurchaseType, PaymentCurrency, UserAccountTypes, PeriodOfDay } from '@rpg-engine/shared';
 export { MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
-import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaPaperPlane, FaShoppingCart, FaChevronUp, FaChevronDown, FaReddit, FaLock, FaRocket, FaHeadset, FaStar, FaShoppingBag, FaTrash, FaCoins, FaInfoCircle, FaBolt, FaCartPlus, FaFilter, FaCheckCircle, FaTicketAlt, FaExclamationCircle, FaArrowLeft, FaUsers, FaWallet, FaHistory } from 'react-icons/fa';
+import { FaTimes, FaDiscord, FaWhatsapp, FaSearch, FaThumbtack, FaBoxOpen, FaChevronLeft, FaChevronRight, FaClipboardList, FaPaperPlane, FaShoppingCart, FaChevronUp, FaChevronDown, FaReddit, FaLock, FaRocket, FaHeadset, FaStar, FaShoppingBag, FaTrash, FaCoins, FaInfoCircle, FaBolt, FaCartPlus, FaCheckCircle, FaTicketAlt, FaExclamationCircle, FaArrowLeft, FaUsers, FaWallet, FaHistory } from 'react-icons/fa';
 import { RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
 import { IoMdContract, IoMdExpand } from 'react-icons/io';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -2468,10 +2468,6 @@ var DraggableContainer = function DraggableContainer(_ref) {
     height = _ref.height,
     minHeight = _ref.minHeight,
     minWidth = _ref.minWidth,
-    mobileWidth = _ref.mobileWidth,
-    mobileHeight = _ref.mobileHeight,
-    _ref$mobileBreakpoint = _ref.mobileBreakpoint,
-    mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 768 : _ref$mobileBreakpoint,
     className = _ref.className,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? RPGUIContainerTypes.FramedGold : _ref$type,
@@ -2548,9 +2544,6 @@ var DraggableContainer = function DraggableContainer(_ref) {
     height: height || 'auto',
     minWidth: minWidth,
     minHeight: minHeight,
-    mobileWidth: mobileWidth,
-    mobileHeight: mobileHeight,
-    mobileBreakpoint: mobileBreakpoint,
     className: "rpgui-container " + type + " " + className,
     isFullScreen: isFullScreen,
     opacity: opacity
@@ -2567,7 +2560,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
-})(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
+})(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
   return props.height;
 }, function (_ref2) {
   var width = _ref2.width;
@@ -2584,11 +2577,6 @@ var Container$a = /*#__PURE__*/styled.div.withConfig({
 }, function (_ref6) {
   var isFullScreen = _ref6.isFullScreen;
   return isFullScreen && css(["justify-content:center;align-items:flex-start;align-content:flex-start;"]);
-}, function (_ref7) {
-  var mobileWidth = _ref7.mobileWidth,
-    mobileHeight = _ref7.mobileHeight,
-    mobileBreakpoint = _ref7.mobileBreakpoint;
-  return (mobileWidth || mobileHeight) && css(["@media (max-width:", "px){", " ", "}"], mobileBreakpoint != null ? mobileBreakpoint : 768, mobileWidth && "width: " + mobileWidth + "; min-width: unset;", mobileHeight && "height: " + mobileHeight + "; min-height: unset;");
 });
 var CloseButton$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
@@ -2605,8 +2593,8 @@ var Title$1 = /*#__PURE__*/styled.h1.withConfig({
 var Icon = /*#__PURE__*/styled.img.withConfig({
   displayName: "DraggableContainer__Icon",
   componentId: "sc-184mpyl-4"
-})(["color:white;z-index:22;font-size:", ";width:", ";margin-right:0.5rem;"], uiFonts.size.xsmall, function (_ref8) {
-  var width = _ref8.width;
+})(["color:white;z-index:22;font-size:", ";width:", ";margin-right:0.5rem;"], uiFonts.size.xsmall, function (_ref7) {
+  var width = _ref7.width;
   return width;
 });
 
@@ -37722,11 +37710,11 @@ var CartView = function CartView(_ref2) {
 var Container$M = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Container",
   componentId: "sc-ydtyl1-0"
-})(["display:flex;flex-direction:column;width:100%;gap:1rem;padding:1rem;"]);
+})(["display:flex;flex-direction:column;width:100%;height:100%;padding:1rem;overflow:hidden;box-sizing:border-box;"]);
 var Header$g = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__Header",
   componentId: "sc-ydtyl1-1"
-})(["display:flex;justify-content:space-between;align-items:center;"]);
+})(["display:flex;justify-content:space-between;align-items:center;flex-shrink:0;"]);
 var Title$n = /*#__PURE__*/styled.h2.withConfig({
   displayName: "CartView__Title",
   componentId: "sc-ydtyl1-2"
@@ -37738,7 +37726,7 @@ var CloseButton$h = /*#__PURE__*/styled.div.withConfig({
 var CartItems = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__CartItems",
   componentId: "sc-ydtyl1-4"
-})(["display:flex;flex-direction:column;gap:0.5rem;overflow-y:auto;max-height:250px;padding-right:0.5rem;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background:#f59e0b;border-radius:4px;&:hover{background:#fbbf24;}}"]);
+})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;min-height:0;overflow-y:auto;margin:1rem 0;padding-right:0.5rem;&::-webkit-scrollbar{width:6px;}&::-webkit-scrollbar-track{background:rgba(0,0,0,0.2);border-radius:4px;}&::-webkit-scrollbar-thumb{background:#f59e0b;border-radius:4px;&:hover{background:#fbbf24;}}"]);
 var EmptyCart = /*#__PURE__*/styled.div.withConfig({
   displayName: "CartView__EmptyCart",
   componentId: "sc-ydtyl1-5"
@@ -38040,53 +38028,31 @@ var useStoreMetadata = function useStoreMetadata() {
   var _useState = useState(false),
     isCollectingMetadata = _useState[0],
     setIsCollectingMetadata = _useState[1];
-  var collectMetadata = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(!item.metadataType || item.metadataType !== MetadataType.CharacterSkin)) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return", null);
-          case 2:
-            setIsCollectingMetadata(true);
-            _context.prev = 3;
-            _context.next = 6;
-            return new Promise(function (_resolve) {
-              // We'll store the resolver functions in a global context
-              // that will be accessible to the MetadataCollector component
-              window.__metadataResolvers = {
-                resolve: function resolve(metadata) {
-                  _resolve(metadata);
-                },
-                item: item
-              };
-            });
-          case 6:
-            return _context.abrupt("return", _context.sent);
-          case 7:
-            _context.prev = 7;
-            setIsCollectingMetadata(false);
-            // Clean up the resolvers
-            if (window.__metadataResolvers) {
-              delete window.__metadataResolvers;
-            }
-            return _context.finish(7);
-          case 11:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[3,, 7, 11]]);
-    }));
-    return function collectMetadata(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
+  var _useState2 = useState(null),
+    currentMetadataItem = _useState2[0],
+    setCurrentMetadataItem = _useState2[1];
+  var resolverRef = useRef(null);
+  var collectMetadata = function collectMetadata(item) {
+    if (!item.metadataType || item.metadataType !== MetadataType.CharacterSkin) {
+      return Promise.resolve(null);
+    }
+    setIsCollectingMetadata(true);
+    setCurrentMetadataItem(item);
+    return new Promise(function (resolve) {
+      resolverRef.current = resolve;
+    });
+  };
+  var resolveMetadata = function resolveMetadata(metadata) {
+    resolverRef.current == null ? void 0 : resolverRef.current(metadata);
+    resolverRef.current = null;
+    setIsCollectingMetadata(false);
+    setCurrentMetadataItem(null);
+  };
   return {
     collectMetadata: collectMetadata,
-    isCollectingMetadata: isCollectingMetadata
+    resolveMetadata: resolveMetadata,
+    isCollectingMetadata: isCollectingMetadata,
+    currentMetadataItem: currentMetadataItem
   };
 };
 
@@ -38105,7 +38071,9 @@ var useStoreCart = function useStoreCart() {
   }, []);
   var _useStoreMetadata = useStoreMetadata(),
     collectMetadata = _useStoreMetadata.collectMetadata,
-    isCollectingMetadata = _useStoreMetadata.isCollectingMetadata;
+    resolveMetadata = _useStoreMetadata.resolveMetadata,
+    isCollectingMetadata = _useStoreMetadata.isCollectingMetadata,
+    currentMetadataItem = _useStoreMetadata.currentMetadataItem;
   var handleAddToCart = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(item, quantity, preselectedMetadata) {
       var metadata;
@@ -38237,7 +38205,9 @@ var useStoreCart = function useStoreCart() {
     closeCart: closeCart,
     getTotalItems: getTotalItems,
     getTotalPrice: getTotalPrice,
-    isCollectingMetadata: isCollectingMetadata
+    isCollectingMetadata: isCollectingMetadata,
+    currentMetadataItem: currentMetadataItem,
+    resolveMetadata: resolveMetadata
   };
 };
 // Helper functions
@@ -38266,23 +38236,42 @@ var MetadataCollector = function MetadataCollector(_ref) {
     config = _ref.config,
     onCollect = _ref.onCollect,
     onCancel = _ref.onCancel;
-  // Make sure we clean up if unmounted without collecting
+  var isPendingRef = useRef(true);
+  var finalize = useCallback(function (callback) {
+    if (!isPendingRef.current) {
+      return;
+    }
+    isPendingRef.current = false;
+    callback();
+  }, []);
+  var handleCollect = useCallback(function (metadata) {
+    finalize(function () {
+      return onCollect(metadata);
+    });
+  }, [finalize, onCollect]);
+  var handleCancel = useCallback(function () {
+    finalize(onCancel);
+  }, [finalize, onCancel]);
   useEffect(function () {
     return function () {
-      // If we're unmounting without explicitly collecting or canceling,
-      // make sure to call onCancel to prevent any hanging promises
-      if (window.__metadataResolvers) {
-        onCancel();
-      }
+      handleCancel();
     };
-  }, [onCancel]);
-  // Use string comparison instead of direct property access
-  if (metadataType === 'CharacterSkin') {
+  }, [handleCancel]);
+  useEffect(function () {
+    if (metadataType === MetadataType.CharacterSkin) {
+      return undefined;
+    }
+    var timer = window.setTimeout(handleCancel, 0);
+    return function () {
+      return window.clearTimeout(timer);
+    };
+  }, [handleCancel, metadataType]);
+  if (metadataType === MetadataType.CharacterSkin) {
     return React.createElement(CharacterSkinSelectionModal, {
       isOpen: true,
-      onClose: onCancel,
+      onClose: handleCancel,
       onConfirm: function onConfirm(selectedSkin) {
-        return onCollect({
+        return handleCollect({
           selectedSkin: selectedSkin
         });
       },
@@ -38291,12 +38280,9 @@ var MetadataCollector = function MetadataCollector(_ref) {
       atlasIMG: config.atlasIMG,
       initialSelectedSkin: config.initialSelectedSkin
     });
-  } else {
-    console.warn("No collector implemented for metadata type: " + metadataType);
-    // Auto-cancel for unhandled types to prevent hanging promises
-    setTimeout(onCancel, 0);
-    return null;
   }
+  console.warn("No collector implemented for metadata type: " + metadataType);
+  return null;
 };
 
 var PaymentMethodModal = function PaymentMethodModal(_ref) {
@@ -38446,6 +38432,159 @@ var ConfirmRow$1 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1dxy6lr-12"
 })(["display:flex;justify-content:center;margin-top:4px;"]);
 
+function packToBlueprint(pack) {
+  return {
+    key: pack.key,
+    name: pack.title,
+    description: pack.description || '',
+    price: pack.priceUSD,
+    currency: PaymentCurrency.USD,
+    texturePath: pack.image["default"] || pack.image.src,
+    type: PurchaseType.Pack,
+    onPurchase: function () {
+      var _onPurchase = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function onPurchase() {
+        return _onPurchase.apply(this, arguments);
+      }
+      return onPurchase;
+    }(),
+    itemType: ItemType.Consumable,
+    itemSubType: ItemSubType.Other,
+    rarity: ItemRarities.Common,
+    weight: 0,
+    isStackable: false,
+    maxStackSize: 1,
+    isUsable: false
+  };
+}
+
+var DEFAULT_TAB_ORDER = ['premium', 'packs', 'items'];
+function isTabAvailable(tabId, params) {
+  var hidePremiumTab = params.hidePremiumTab,
+    hasCharacters = params.hasCharacters,
+    hasRedeem = params.hasRedeem,
+    hasWallet = params.hasWallet,
+    hasHistory = params.hasHistory;
+  if (tabId === 'premium') return !hidePremiumTab;
+  if (tabId === 'characters') return !!hasCharacters;
+  if (tabId === 'redeem') return !!hasRedeem;
+  if (tabId === 'wallet') return !!hasWallet;
+  if (tabId === 'history') return !!hasHistory;
+  return true;
+}
+function getInitialActiveTab(availableTabIds, defaultActiveTab) {
+  var _availableTabIds$;
+  if (defaultActiveTab && availableTabIds.includes(defaultActiveTab)) {
+    return defaultActiveTab;
+  }
+  return (_availableTabIds$ = availableTabIds[0]) != null ? _availableTabIds$ : 'items';
+}
+function buildAvailableTabIds(params) {
+  var tabOrder = params.tabOrder,
+    hasCharacters = params.hasCharacters,
+    hasRedeem = params.hasRedeem,
+    hasWallet = params.hasWallet,
+    hasHistory = params.hasHistory;
+  var ids = [].concat(tabOrder != null ? tabOrder : DEFAULT_TAB_ORDER, hasCharacters ? ['characters'] : [], hasRedeem ? ['redeem'] : [], hasWallet ? ['wallet'] : [], hasHistory ? ['history'] : []);
+  return Array.from(new Set(ids.filter(function (id) {
+    return isTabAvailable(id, params);
+  })));
+}
+function useStoreTabs(params) {
+  var tabOrder = params.tabOrder,
+    hidePremiumTab = params.hidePremiumTab,
+    hasCharacters = params.hasCharacters,
+    hasRedeem = params.hasRedeem,
+    hasWallet = params.hasWallet,
+    hasHistory = params.hasHistory,
+    defaultActiveTab = params.defaultActiveTab,
+    onTabChange = params.onTabChange,
+    getItemCount = params.getItemCount;
+  var availableTabIds = useMemo(function () {
+    return buildAvailableTabIds({
+      tabOrder: tabOrder,
+      hidePremiumTab: hidePremiumTab,
+      hasCharacters: hasCharacters,
+      hasRedeem: hasRedeem,
+      hasWallet: hasWallet,
+      hasHistory: hasHistory
+    });
+  }, [tabOrder, hidePremiumTab, hasCharacters, hasRedeem, hasWallet, hasHistory]);
+  var _useState = useState(function () {
+      return getInitialActiveTab(availableTabIds, defaultActiveTab);
+    }),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  var resolvedActiveTab = availableTabIds.includes(activeTab) ? activeTab : getInitialActiveTab(availableTabIds, defaultActiveTab);
+  useEffect(function () {
+    if (resolvedActiveTab === activeTab) {
+      return;
+    }
+    setActiveTab(resolvedActiveTab);
+  }, [activeTab, resolvedActiveTab]);
+  var handleTabChange = function handleTabChange(tabId) {
+    var _getItemCount;
+    var nextTab = tabId;
+    if (!availableTabIds.includes(nextTab) || nextTab === resolvedActiveTab) {
+      return;
+    }
+    setActiveTab(nextTab);
+    onTabChange == null ? void 0 : onTabChange(nextTab, (_getItemCount = getItemCount == null ? void 0 : getItemCount(nextTab)) != null ? _getItemCount : 0);
+  };
+  return {
+    availableTabIds: availableTabIds,
+    activeTab: resolvedActiveTab,
+    setActiveTab: setActiveTab,
+    handleTabChange: handleTabChange
+  };
+}
+
+var StoreHeader = function StoreHeader(_ref) {
+  var tabs = _ref.tabs,
+    activeTabId = _ref.activeTabId,
+    onTabChange = _ref.onTabChange,
+    cartItemCount = _ref.cartItemCount,
+    onOpenCart = _ref.onOpenCart;
+  return React.createElement(HeaderRow, null, React.createElement(TabsFlexWrapper, null, React.createElement(Tabs, {
+    options: tabs.map(function (t) {
+      return {
+        id: t.id,
+        label: t.label,
+        icon: t.icon
+      };
+    }),
+    activeTabId: activeTabId,
+    onTabChange: onTabChange
+  })), React.createElement(CartButtonWrapper, null, React.createElement(CTAButton, {
+    icon: React.createElement(FaShoppingCart, null),
+    onClick: onOpenCart
+  }), cartItemCount > 0 && React.createElement(CartBadge, null, cartItemCount)));
+};
+var HeaderRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreHeader__HeaderRow",
+  componentId: "sc-1y26lw-0"
+})(["display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:0.25rem;padding-top:10px;padding-right:12px;"]);
+var TabsFlexWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreHeader__TabsFlexWrapper",
+  componentId: "sc-1y26lw-1"
+})(["flex:1;min-width:0;"]);
+var CartButtonWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreHeader__CartButtonWrapper",
+  componentId: "sc-1y26lw-2"
+})(["position:relative;flex-shrink:0;"]);
+var CartBadge = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreHeader__CartBadge",
+  componentId: "sc-1y26lw-3"
+})(["position:absolute;top:-8px;right:-8px;background:#ef4444;color:white;font-family:'Press Start 2P',cursive;font-size:0.5rem;padding:4px;border-radius:50%;border:2px solid #000;display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;box-sizing:content-box;"]);
+
 var ScrollableContent = function ScrollableContent(_ref) {
   var items = _ref.items,
     renderItem = _ref.renderItem,
@@ -38458,8 +38597,7 @@ var ScrollableContent = function ScrollableContent(_ref) {
     layout = _ref$layout === void 0 ? 'list' : _ref$layout,
     _ref$gridColumns = _ref.gridColumns,
     gridColumns = _ref$gridColumns === void 0 ? 4 : _ref$gridColumns,
-    _ref$maxHeight = _ref.maxHeight,
-    maxHeight = _ref$maxHeight === void 0 ? '500px' : _ref$maxHeight;
+    maxHeight = _ref.maxHeight;
   if (items.length === 0) {
     return React.createElement(EmptyMessage$3, null, emptyMessage);
   }
@@ -38515,8 +38653,8 @@ var StyledDropdown$7 = /*#__PURE__*/styled(Dropdown).withConfig({
 var Content$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ScrollableContent__Content",
   componentId: "sc-xhh2um-7"
-})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:1rem;max-height:", ";overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;&.grid{display:grid;grid-template-columns:repeat( ", ",minmax(0,1fr) );gap:1rem;align-items:start;.ScrollableContent-item{display:flex;align-items:flex-start;}}&.list{display:flex;flex-direction:column;gap:0.5rem;}"], function (props) {
-  return props.$maxHeight;
+})(["display:flex;flex-direction:column;gap:0.5rem;flex:1;padding:1rem;", " &.grid{display:grid;grid-template-columns:repeat( ", ",minmax(0,1fr) );gap:1rem;align-items:start;.ScrollableContent-item{display:flex;align-items:flex-start;}}&.list{display:flex;flex-direction:column;gap:0.5rem;}"], function (p) {
+  return p.$maxHeight ? "max-height: " + p.$maxHeight + "; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;" : '';
 }, function (props) {
   return props.$gridColumns;
 });
@@ -39098,7 +39236,7 @@ var TextInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-ptotuo-12"
 })(["width:120px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;"]);
 
-var useStoreFiltering = function useStoreFiltering(items) {
+var useStoreFiltering = function useStoreFiltering(items, overrideCategoryOptions) {
   var _useState = useState(''),
     searchQuery = _useState[0],
     setSearchQuery = _useState[1];
@@ -39106,6 +39244,21 @@ var useStoreFiltering = function useStoreFiltering(items) {
     selectedCategory = _useState2[0],
     setSelectedCategory = _useState2[1];
   var categoryOptions = useMemo(function () {
+    if (overrideCategoryOptions) {
+      var normalizedOptions = overrideCategoryOptions.some(function (opt) {
+        return opt.value === 'all';
+      }) ? overrideCategoryOptions : [{
+        value: 'all',
+        label: 'All'
+      }].concat(overrideCategoryOptions);
+      return normalizedOptions.map(function (opt, index) {
+        return {
+          id: index,
+          value: opt.value,
+          option: opt.label
+        };
+      });
+    }
     var uniqueCategories = Array.from(new Set(items.map(function (item) {
       return item.itemType;
     })));
@@ -39117,7 +39270,16 @@ var useStoreFiltering = function useStoreFiltering(items) {
         option: category === 'all' ? 'All' : category
       };
     });
-  }, [items]);
+  }, [items, overrideCategoryOptions]);
+  useEffect(function () {
+    var _categoryOptions$0$va, _categoryOptions$;
+    if (categoryOptions.some(function (option) {
+      return option.value === selectedCategory;
+    })) {
+      return;
+    }
+    setSelectedCategory((_categoryOptions$0$va = (_categoryOptions$ = categoryOptions[0]) == null ? void 0 : _categoryOptions$.value) != null ? _categoryOptions$0$va : 'all');
+  }, [categoryOptions, selectedCategory]);
   var filteredItems = useMemo(function () {
     return items.filter(function (item) {
       var matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -39156,22 +39318,21 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     onItemView = _ref.onItemView,
     onCategoryChange = _ref.onCategoryChange,
     _ref$currencySymbol = _ref.currencySymbol,
-    currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol;
-  var _useStoreFiltering = useStoreFiltering(items),
+    currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
+    categoryOptionsProp = _ref.categoryOptions;
+  var _useStoreFiltering = useStoreFiltering(items, categoryOptionsProp),
     searchQuery = _useStoreFiltering.searchQuery,
     setSearchQuery = _useStoreFiltering.setSearchQuery,
     selectedCategory = _useStoreFiltering.selectedCategory,
     setSelectedCategory = _useStoreFiltering.setSelectedCategory,
     categoryOptions = _useStoreFiltering.categoryOptions,
     filteredItems = _useStoreFiltering.filteredItems;
-  // Fire category change event when the filter changes
   useEffect(function () {
     onCategoryChange == null ? void 0 : onCategoryChange(selectedCategory, filteredItems.length);
   }, [selectedCategory, filteredItems.length]);
   var renderStoreItem = function renderStoreItem(item) {
     var meta = itemBadges[item.key];
     var position = filteredItems.indexOf(item);
-    // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return React.createElement(StoreCharacterSkinRow, {
         key: item.key,
@@ -39182,7 +39343,6 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
         userAccountType: userAccountType || UserAccountTypes.Free
       });
     }
-    // Render text input row when configured for this item key
     if (textInputItemKeys.includes(item.key)) {
       return React.createElement(StoreItemRow, Object.assign({
         key: item.key,
@@ -39198,7 +39358,6 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
         currencySymbol: currencySymbol
       }, meta));
     }
-    // Fallback to standard arrow-based row
     return React.createElement(StoreItemRow, Object.assign({
       key: item.key,
       item: item,
@@ -39212,19 +39371,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       currencySymbol: currencySymbol
     }, meta));
   };
-  var _useState = useState(false),
-    showFilters = _useState[0],
-    setShowFilters = _useState[1];
-  return React.createElement(StoreContainer, null, React.createElement(FilterBar, null, React.createElement(FilterToggle, {
-    "$active": showFilters,
-    onClick: function onClick() {
-      return setShowFilters(function (prev) {
-        return !prev;
-      });
-    }
-  }, React.createElement(FaFilter, {
-    size: 12
-  }), React.createElement("span", null, "Filter"))), showFilters && React.createElement(SearchHeader$2, null, React.createElement(SearchBarContainer$1, null, React.createElement(SearchBar, {
+  return React.createElement(StoreContainer, null, React.createElement(SearchHeader$2, null, React.createElement(SearchBarContainer$1, null, React.createElement(SearchBar, {
     value: searchQuery,
     onChange: setSearchQuery,
     placeholder: "Search items..."
@@ -39236,15 +39383,12 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       };
     }),
     activeId: selectedCategory,
-    onChange: function onChange(id) {
-      return setSelectedCategory(id);
-    }
+    onChange: setSelectedCategory
   })), React.createElement(ScrollableContent, {
     items: filteredItems,
     renderItem: renderStoreItem,
     emptyMessage: "No items match your filters.",
-    layout: "list",
-    maxHeight: "none"
+    layout: "list"
   }));
 };
 var StoreContainer = /*#__PURE__*/styled.div.withConfig({
@@ -39254,22 +39398,11 @@ var StoreContainer = /*#__PURE__*/styled.div.withConfig({
 var SearchHeader$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemsSection__SearchHeader",
   componentId: "sc-l6f466-1"
-})(["display:flex;gap:0.5rem;align-items:center;padding-top:0.25rem;"]);
+})(["display:flex;gap:0.5rem;align-items:center;padding:0.25rem 1rem 0;"]);
 var SearchBarContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemsSection__SearchBarContainer",
   componentId: "sc-l6f466-2"
 })(["flex:0.75;"]);
-var FilterBar = /*#__PURE__*/styled.div.withConfig({
-  displayName: "StoreItemsSection__FilterBar",
-  componentId: "sc-l6f466-3"
-})(["display:flex;padding-top:0.25rem;"]);
-var FilterToggle = /*#__PURE__*/styled.button.withConfig({
-  displayName: "StoreItemsSection__FilterToggle",
-  componentId: "sc-l6f466-4"
-})(["display:flex;align-items:center;gap:0.4rem;background:", ";border:1px solid rgba(255,255,255,0.3);color:#fff;padding:0.3rem 0.6rem;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',cursive;font-size:0.55rem;&:hover{background:rgba(255,255,255,0.1);}"], function (_ref2) {
-  var $active = _ref2.$active;
-  return $active ? 'rgba(255,255,255,0.15)' : 'transparent';
-});
 
 var usePackFiltering = function usePackFiltering(packs) {
   var _useState = useState(''),
@@ -39417,8 +39550,7 @@ var StorePacksSection = function StorePacksSection(_ref2) {
       onChange: setSearchQuery,
       placeholder: 'Search packs...'
     },
-    layout: "list",
-    maxHeight: "50vh"
+    layout: "list"
   });
 };
 var PackRow = /*#__PURE__*/styled(ItemRowWrapper).withConfig({
@@ -39722,7 +39854,7 @@ var Store = function Store(_ref) {
     packs = _ref$packs === void 0 ? [] : _ref$packs,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
-    _onPurchase4 = _ref.onPurchase,
+    _onPurchase = _ref.onPurchase,
     onShowHistory = _ref.onShowHistory,
     onShowWallet = _ref.onShowWallet,
     walletLabel = _ref.walletLabel,
@@ -39743,11 +39875,6 @@ var Store = function Store(_ref) {
     customHistoryContent = _ref.customHistoryContent,
     _ref$fullScreen = _ref.fullScreen,
     fullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
-    containerWidth = _ref.containerWidth,
-    containerHeight = _ref.containerHeight,
-    mobileContainerWidth = _ref.mobileContainerWidth,
-    mobileContainerHeight = _ref.mobileContainerHeight,
-    mobileBreakpoint = _ref.mobileBreakpoint,
     _ref$packsTabLabel = _ref.packsTabLabel,
     packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel,
     packsBadge = _ref.packsBadge,
@@ -39757,7 +39884,7 @@ var Store = function Store(_ref) {
     packBadges = _ref.packBadges,
     onItemView = _ref.onItemView,
     onPackView = _ref.onPackView,
-    _onTabChange = _ref.onTabChange,
+    onTabChange = _ref.onTabChange,
     onCategoryChange = _ref.onCategoryChange,
     onCartOpen = _ref.onCartOpen,
     onAddToCart = _ref.onAddToCart,
@@ -39770,24 +39897,15 @@ var Store = function Store(_ref) {
     currencySymbol = _ref$currencySymbol === void 0 ? '$' : _ref$currencySymbol,
     onRedeem = _ref.onRedeem,
     onRedeemInputFocus = _ref.onRedeemInputFocus,
-    onRedeemInputBlur = _ref.onRedeemInputBlur;
-  var defaultTabOrder = ['premium', 'packs', 'items'];
+    onRedeemInputBlur = _ref.onRedeemInputBlur,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '1000px' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'min(85vh, 900px)' : _ref$height,
+    itemCategoryOptions = _ref.itemCategoryOptions;
   var _useState = useState(null),
     selectedPack = _useState[0],
     setSelectedPack = _useState[1];
-  var _useState2 = useState(function () {
-      var _validTabs$;
-      var allTabIds = [].concat(tabOrder != null ? tabOrder : defaultTabOrder, customCharactersContent ? ['characters'] : [], onRedeem ? ['redeem'] : [], onShowWallet || customWalletContent ? ['wallet'] : [], onShowHistory || customHistoryContent ? ['history'] : []);
-      var validTabs = Array.from(new Set(allTabIds.filter(function (id) {
-        return !(hidePremiumTab && id === 'premium');
-      })));
-      if (defaultActiveTab && validTabs.includes(defaultActiveTab)) {
-        return defaultActiveTab;
-      }
-      return (_validTabs$ = validTabs[0]) != null ? _validTabs$ : hidePremiumTab ? 'items' : 'premium';
-    }),
-    activeTab = _useState2[0],
-    setActiveTab = _useState2[1];
   var _useStoreCart = useStoreCart(),
     cartItems = _useStoreCart.cartItems,
     handleAddToCart = _useStoreCart.handleAddToCart,
@@ -39797,13 +39915,38 @@ var Store = function Store(_ref) {
     closeCart = _useStoreCart.closeCart,
     getTotalItems = _useStoreCart.getTotalItems,
     getTotalPrice = _useStoreCart.getTotalPrice,
-    isCartOpen = _useStoreCart.isCartOpen;
-  var _useState3 = useState(false),
-    isCollectingMetadata = _useState3[0],
-    setIsCollectingMetadata = _useState3[1];
-  var _useState4 = useState(null),
-    currentMetadataItem = _useState4[0],
-    setCurrentMetadataItem = _useState4[1];
+    isCartOpen = _useStoreCart.isCartOpen,
+    isCollectingMetadata = _useStoreCart.isCollectingMetadata,
+    currentMetadataItem = _useStoreCart.currentMetadataItem,
+    resolveMetadata = _useStoreCart.resolveMetadata;
+  var filteredItems = useMemo(function () {
+    return {
+      items: items,
+      premium: items.filter(function (item) {
+        var _item$requiredAccount, _item$requiredAccount2;
+        return ((_item$requiredAccount = (_item$requiredAccount2 = item.requiredAccountType) == null ? void 0 : _item$requiredAccount2.length) != null ? _item$requiredAccount : 0) > 0;
+      })
+    };
+  }, [items]);
+  var _useStoreTabs = useStoreTabs({
+      tabOrder: tabOrder,
+      defaultActiveTab: defaultActiveTab,
+      hidePremiumTab: hidePremiumTab,
+      hasCharacters: !!customCharactersContent,
+      hasRedeem: !!onRedeem,
+      hasWallet: !!(onShowWallet || customWalletContent),
+      hasHistory: !!(onShowHistory || customHistoryContent),
+      onTabChange: onTabChange,
+      getItemCount: function getItemCount(tab) {
+        if (tab === 'items') return filteredItems.items.length;
+        if (tab === 'premium') return filteredItems.premium.length;
+        if (tab === 'packs') return packs.length;
+        return 0;
+      }
+    }),
+    availableTabIds = _useStoreTabs.availableTabIds,
+    activeTab = _useStoreTabs.activeTab,
+    handleTabChange = _useStoreTabs.handleTabChange;
   var handleOpenCart = function handleOpenCart() {
     openCart();
     onCartOpen == null ? void 0 : onCartOpen();
@@ -39820,85 +39963,13 @@ var Store = function Store(_ref) {
     if (quantity === void 0) {
       quantity = 1;
     }
-    var packItem = {
-      key: pack.key,
-      name: pack.title,
-      description: pack.description || '',
-      price: pack.priceUSD,
-      currency: PaymentCurrency.USD,
-      texturePath: pack.image["default"] || pack.image.src,
-      type: PurchaseType.Pack,
-      onPurchase: function () {
-        var _onPurchase = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          return _regeneratorRuntime().wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
-              case 0:
-              case "end":
-                return _context.stop();
-            }
-          }, _callee);
-        }));
-        function onPurchase() {
-          return _onPurchase.apply(this, arguments);
-        }
-        return onPurchase;
-      }(),
-      itemType: ItemType.Consumable,
-      itemSubType: ItemSubType.Other,
-      rarity: ItemRarities.Common,
-      weight: 0,
-      isStackable: false,
-      maxStackSize: 1,
-      isUsable: false
-    };
-    handleAddToCart(packItem, quantity);
-    onAddToCart == null ? void 0 : onAddToCart(packItem, quantity);
-  };
-  var filterItems = function filterItems(itemsToFilter, type) {
-    return itemsToFilter.filter(function (item) {
-      if (type === 'premium') {
-        var _item$requiredAccount, _item$requiredAccount2;
-        return (_item$requiredAccount = (_item$requiredAccount2 = item.requiredAccountType) == null ? void 0 : _item$requiredAccount2.length) != null ? _item$requiredAccount : 0 > 0;
-      }
-      return true;
-    });
-  };
-  var filteredItems = useMemo(function () {
-    return {
-      items: filterItems(items, 'items'),
-      premium: filterItems(items, 'premium')
-    };
-  }, [items]);
-  var handleMetadataCollected = function handleMetadataCollected(metadata) {
-    if (currentMetadataItem && window.__metadataResolvers) {
-      // Resolve the promise in the useStoreMetadata hook
-      window.__metadataResolvers.resolve(metadata);
-      // Reset the metadata collection state
-      setCurrentMetadataItem(null);
-      // Removed unused setPendingMetadataQuantity call
-    }
-  };
-  var handleMetadataCancel = function handleMetadataCancel() {
-    if (window.__metadataResolvers) {
-      // Resolve with null to indicate cancellation
-      window.__metadataResolvers.resolve(null);
-    }
-    // Reset the metadata collection state
-    setCurrentMetadataItem(null);
-    // Removed unused setPendingMetadataQuantity call
-    setIsCollectingMetadata(false);
+    var bp = packToBlueprint(pack);
+    handleAddToCart(bp, quantity);
+    onAddToCart == null ? void 0 : onAddToCart(bp, quantity);
   };
-  if (loading) {
-    return React.createElement(LoadingMessage$1, null, "Loading...");
-  }
-  if (error) {
-    return React.createElement(ErrorMessage$3, null, error);
-  }
-  // Build tabs dynamically based on props
-  var tabIds = [].concat(tabOrder != null ? tabOrder : defaultTabOrder, customCharactersContent ? ['characters'] : [], onRedeem ? ['redeem'] : [], onShowWallet || customWalletContent ? ['wallet'] : [], onShowHistory || customHistoryContent ? ['history'] : []);
-  var availableTabIds = Array.from(new Set(tabIds.filter(function (id) {
-    return !(hidePremiumTab && id === 'premium');
-  })));
+  var makePackQuickBuy = onQuickBuy ? function (pack, qty) {
+    return onQuickBuy(packToBlueprint(pack), qty);
+  } : undefined;
   var tabsMap = {
     premium: {
       id: 'premium',
@@ -39912,40 +39983,7 @@ var Store = function Store(_ref) {
           return pack.priceUSD >= 9.99;
         }),
         onAddToCart: handleAddPackToCart,
-        onQuickBuy: onQuickBuy ? function (pack, qty) {
-          var bp = {
-            key: pack.key,
-            name: pack.title,
-            description: pack.description || '',
-            price: pack.priceUSD,
-            currency: PaymentCurrency.USD,
-            texturePath: pack.image["default"] || pack.image.src,
-            type: PurchaseType.Pack,
-            onPurchase: function () {
-              var _onPurchase2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-                return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-                  while (1) switch (_context2.prev = _context2.next) {
-                    case 0:
-                    case "end":
-                      return _context2.stop();
-                  }
-                }, _callee2);
-              }));
-              function onPurchase() {
-                return _onPurchase2.apply(this, arguments);
-              }
-              return onPurchase;
-            }(),
-            itemType: ItemType.Consumable,
-            itemSubType: ItemSubType.Other,
-            rarity: ItemRarities.Common,
-            weight: 0,
-            isStackable: false,
-            maxStackSize: 1,
-            isUsable: false
-          };
-          onQuickBuy(bp, qty);
-        } : undefined,
+        onQuickBuy: makePackQuickBuy,
         onSelectPack: setSelectedPack,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
@@ -39970,40 +40008,7 @@ var Store = function Store(_ref) {
           return pack.priceUSD < 9.99;
         }),
         onAddToCart: handleAddPackToCart,
-        onQuickBuy: onQuickBuy ? function (pack, qty) {
-          var bp = {
-            key: pack.key,
-            name: pack.title,
-            description: pack.description || '',
-            price: pack.priceUSD,
-            currency: PaymentCurrency.USD,
-            texturePath: pack.image["default"] || pack.image.src,
-            type: PurchaseType.Pack,
-            onPurchase: function () {
-              var _onPurchase3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-                return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-                  while (1) switch (_context3.prev = _context3.next) {
-                    case 0:
-                    case "end":
-                      return _context3.stop();
-                  }
-                }, _callee3);
-              }));
-              function onPurchase() {
-                return _onPurchase3.apply(this, arguments);
-              }
-              return onPurchase;
-            }(),
-            itemType: ItemType.Consumable,
-            itemSubType: ItemSubType.Other,
-            rarity: ItemRarities.Common,
-            weight: 0,
-            isStackable: false,
-            maxStackSize: 1,
-            isUsable: false
-          };
-          onQuickBuy(bp, qty);
-        } : undefined,
+        onQuickBuy: makePackQuickBuy,
         onSelectPack: setSelectedPack,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
@@ -40022,7 +40027,7 @@ var Store = function Store(_ref) {
       content: React.createElement(StoreItemsSection, {
         items: filteredItems.items,
         onAddToCart: handleAddToCartTracked,
-        onQuickBuy: onQuickBuy ? function (item, qty, _meta) {
+        onQuickBuy: onQuickBuy ? function (item, qty) {
           return onQuickBuy(item, qty);
         } : undefined,
         atlasJSON: atlasJSON,
@@ -40032,7 +40037,8 @@ var Store = function Store(_ref) {
         itemBadges: itemBadges,
         onItemView: onItemView,
         onCategoryChange: onCategoryChange,
-        currencySymbol: currencySymbol
+        currencySymbol: currencySymbol,
+        categoryOptions: itemCategoryOptions
       })
     },
     characters: {
@@ -40082,42 +40088,42 @@ var Store = function Store(_ref) {
       }))
     }
   };
+  if (loading) return React.createElement(LoadingMessage$1, null, "Loading...");
+  if (error) return React.createElement(ErrorMessage$3, null, error);
   return React.createElement(DraggableContainer, {
-    title: "Store",
     onCloseButton: onClose,
-    width: containerWidth != null ? containerWidth : "1000px",
+    width: width,
     minWidth: "700px",
-    height: containerHeight != null ? containerHeight : "min(85vh, 900px)",
-    mobileWidth: mobileContainerWidth != null ? mobileContainerWidth : "95vw",
-    mobileHeight: mobileContainerHeight != null ? mobileContainerHeight : "95vh",
-    mobileBreakpoint: mobileBreakpoint,
+    height: height,
     type: RPGUIContainerTypes.Framed,
-    cancelDrag: "[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button",
+    cancelDrag: ".store-scroll-area, [class*='CartView'], [class*='StoreItemDetails'], .close-button",
     isFullScreen: fullScreen
-  }, isCollectingMetadata && currentMetadataItem && currentMetadataItem.metadataType ? React.createElement(MetadataCollector, {
+  }, isCollectingMetadata && currentMetadataItem != null && currentMetadataItem.metadataType ? React.createElement(MetadataCollector, {
     metadataType: currentMetadataItem.metadataType,
     config: currentMetadataItem.metadataConfig || {},
-    onCollect: handleMetadataCollected,
-    onCancel: handleMetadataCancel
+    onCollect: resolveMetadata,
+    onCancel: function onCancel() {
+      return resolveMetadata(null);
+    }
   }) : isCartOpen ? React.createElement(CartView, {
     cartItems: cartItems,
     onRemoveFromCart: handleRemoveFromCartTracked,
     onClose: closeCart,
     onPurchase: function () {
-      var _onPurchase5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+      var _onPurchase2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
             case 0:
-              handleCartPurchase(_onPurchase4);
-              return _context4.abrupt("return", true);
+              handleCartPurchase(_onPurchase);
+              return _context.abrupt("return", true);
             case 2:
             case "end":
-              return _context4.stop();
+              return _context.stop();
           }
-        }, _callee4);
+        }, _callee);
       }));
       function onPurchase() {
-        return _onPurchase5.apply(this, arguments);
+        return _onPurchase2.apply(this, arguments);
       }
       return onPurchase;
     }(),
@@ -40141,7 +40147,9 @@ var Store = function Store(_ref) {
       return handleAddPackToCart(selectedPack);
     },
     currencySymbol: currencySymbol
-  }) : React.createElement(Container$Q, null, featuredItems && featuredItems.length > 0 && React.createElement(FeaturedBanner, {
+  }) : React.createElement(Container$Q, {
+    className: "store-scroll-area"
+  }, featuredItems && featuredItems.length > 0 && React.createElement(FeaturedBanner, {
     items: featuredItems,
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
@@ -40155,48 +40163,17 @@ var Store = function Store(_ref) {
       var blueprint = items.find(function (bp) {
         return bp.key === item.key;
       });
-      if (blueprint) onQuickBuy(blueprint, 1);else {
+      if (blueprint) {
+        onQuickBuy(blueprint, 1);
+      } else {
         var pack = packs.find(function (p) {
           return p.key === item.key;
         });
-        if (pack) {
-          var packBlueprint = {
-            key: pack.key,
-            name: pack.title,
-            description: pack.description || '',
-            price: pack.priceUSD,
-            currency: PaymentCurrency.USD,
-            texturePath: pack.image["default"] || pack.image.src,
-            type: PurchaseType.Pack,
-            onPurchase: function () {
-              var _onPurchase6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-                return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-                  while (1) switch (_context5.prev = _context5.next) {
-                    case 0:
-                    case "end":
-                      return _context5.stop();
-                  }
-                }, _callee5);
-              }));
-              function onPurchase() {
-                return _onPurchase6.apply(this, arguments);
-              }
-              return onPurchase;
-            }(),
-            itemType: ItemType.Consumable,
-            itemSubType: ItemSubType.Other,
-            rarity: ItemRarities.Common,
-            weight: 0,
-            isStackable: false,
-            maxStackSize: 1,
-            isUsable: false
-          };
-          onQuickBuy(packBlueprint, 1);
-        }
+        if (pack) onQuickBuy(packToBlueprint(pack), 1);
       }
     } : undefined
-  }), React.createElement(MainContent$1, null, React.createElement(HeaderRow, null, React.createElement(TabsFlexWrapper, null, React.createElement(Tabs, {
-    options: availableTabIds.map(function (id) {
+  }), React.createElement(MainContent$1, null, React.createElement(StoreHeader, {
+    tabs: availableTabIds.map(function (id) {
       var _tabsMap$id, _tabsMap$id2;
       return {
         id: id,
@@ -40205,20 +40182,12 @@ var Store = function Store(_ref) {
       };
     }),
     activeTabId: activeTab,
-    onTabChange: function onTabChange(tabId) {
-      var nextTab = tabId;
-      setActiveTab(nextTab);
-      if (_onTabChange) {
-        var itemCount = nextTab === 'items' ? filteredItems.items.length : nextTab === 'premium' ? filteredItems.premium.length : nextTab === 'packs' ? packs.length : 0;
-        _onTabChange(nextTab, itemCount);
-      }
-    }
-  })), React.createElement(CartButtonWrapper, null, React.createElement(CTAButton, {
-    icon: React.createElement(FaShoppingCart, null),
-    onClick: handleOpenCart
-  }), getTotalItems() > 0 && React.createElement(CartBadge, null, getTotalItems()))), React.createElement(TabContent, null, (_tabsMap$activeTab = tabsMap[activeTab]) == null ? void 0 : _tabsMap$activeTab.content)), cartItems.length > 0 && React.createElement(Footer$3, null, React.createElement(CTAButton, {
+    onTabChange: handleTabChange,
+    cartItemCount: getTotalItems(),
+    onOpenCart: handleOpenCart
+  }), React.createElement(TabContent, null, (_tabsMap$activeTab = tabsMap[activeTab]) == null ? void 0 : _tabsMap$activeTab.content)), cartItems.length > 0 && React.createElement(Footer$3, null, React.createElement(CTAButton, {
     icon: React.createElement(FaShoppingCart, null),
-    label: "Checkout \xB7 " + getTotalItems() + " item" + (getTotalItems() !== 1 ? 's' : '') + " (" + currencySymbol + getTotalPrice().toFixed(2) + ")",
+    label: "Proceed to Checkout (" + currencySymbol + getTotalPrice().toFixed(2) + ")",
     onClick: handleOpenCart,
     fullWidth: true
   }))));
@@ -40226,50 +40195,34 @@ var Store = function Store(_ref) {
 var Container$Q = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__Container",
   componentId: "sc-64dj00-0"
-})(["display:flex;flex-direction:column;width:100%;height:calc(100% - 48px);gap:0.5rem;position:relative;overflow:hidden;"]);
-var HeaderRow = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Store__HeaderRow",
-  componentId: "sc-64dj00-1"
-})(["display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:0.25rem;padding-top:10px;padding-right:12px;"]);
-var TabsFlexWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Store__TabsFlexWrapper",
-  componentId: "sc-64dj00-2"
-})(["flex:1;min-width:0;"]);
-var CartButtonWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Store__CartButtonWrapper",
-  componentId: "sc-64dj00-3"
-})(["position:relative;flex-shrink:0;"]);
-var CartBadge = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Store__CartBadge",
-  componentId: "sc-64dj00-4"
-})(["position:absolute;top:-8px;right:-8px;background:#ef4444;color:white;font-family:'Press Start 2P',cursive;font-size:0.5rem;padding:4px;border-radius:50%;border:2px solid #000;display:flex;align-items:center;justify-content:center;min-width:16px;min-height:16px;box-sizing:content-box;"]);
+})(["display:flex;flex-direction:column;width:100%;height:100%;gap:0.5rem;position:relative;overflow:hidden;"]);
 var MainContent$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__MainContent",
-  componentId: "sc-64dj00-5"
+  componentId: "sc-64dj00-1"
 })(["flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;"]);
 var TabContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__TabContent",
-  componentId: "sc-64dj00-6"
+  componentId: "sc-64dj00-2"
 })(["flex:1;overflow-y:auto;"]);
 var Footer$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__Footer",
-  componentId: "sc-64dj00-7"
-})(["padding:0.5rem;border-top:2px solid #f59e0b;background:rgba(0,0,0,0.2);flex-shrink:0;"]);
+  componentId: "sc-64dj00-3"
+})(["padding:1rem;border-top:2px solid #f59e0b;background:rgba(0,0,0,0.2);flex-shrink:0;"]);
 var TabLabelWithBadge = /*#__PURE__*/styled.span.withConfig({
   displayName: "Store__TabLabelWithBadge",
-  componentId: "sc-64dj00-8"
+  componentId: "sc-64dj00-4"
 })(["display:inline-flex;align-items:center;gap:5px;"]);
 var LoadingMessage$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__LoadingMessage",
-  componentId: "sc-64dj00-9"
+  componentId: "sc-64dj00-5"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.white);
 var ErrorMessage$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__ErrorMessage",
-  componentId: "sc-64dj00-10"
+  componentId: "sc-64dj00-6"
 })(["text-align:center;color:", ";padding:2rem;"], uiColors.red);
 var CenteredContent = /*#__PURE__*/styled.div.withConfig({
   displayName: "Store__CenteredContent",
-  componentId: "sc-64dj00-11"
+  componentId: "sc-64dj00-7"
 })(["display:flex;align-items:center;justify-content:center;height:100%;padding:2rem;"]);
 
 var TextArea = function TextArea(_ref) {