@rpg-engine/long-bow 0.8.71 → 0.8.73

package/dist/long-bow.cjs.development.js

@@ -57634,7 +57634,7 @@ var useStoreMetadata = function useStoreMetadata() {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            if (!(!item.metadataType || item.metadataType === shared.MetadataType.None)) {
+            if (!(!item.metadataType || item.metadataType !== shared.MetadataType.CharacterSkin)) {
               _context.next = 2;
               break;
             }
@@ -57714,7 +57714,7 @@ var useStoreCart = function useStoreCart() {
             });
             return _context.abrupt("return");
           case 3:
-            if (!(item.metadataType && item.metadataType !== shared.MetadataType.None)) {
+            if (!(item.metadataType === shared.MetadataType.CharacterSkin)) {
               _context.next = 12;
               break;
             }
@@ -57830,7 +57830,11 @@ var useStoreCart = function useStoreCart() {
 };
 // Helper functions
 function getPurchaseType(item) {
-  // Check if the item comes from a pack based on naming convention or other property
+  // Use the type from IProductBlueprint if available, otherwise infer
+  if (item.type) {
+    return item.type;
+  }
+  // Fallback logic for backward compatibility
   if (item.key.startsWith('pack_')) {
     return shared.PurchaseType.Pack;
   } else {
@@ -57962,25 +57966,13 @@ var EmptyMessage$1 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-xhh2um-8"
 })(["text-align:center;color:#9ca3af;padding:2rem;flex:1;display:flex;align-items:center;justify-content:center;"]);
 
-var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
-  var _item$metadataConfig, _item$metadataConfig2, _item$metadataConfig3, _item$requiredAccount;
-  var item = _ref.item,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    onAddToCart = _ref.onAddToCart,
-    userAccountType = _ref.userAccountType;
+var useCharacterSkinNavigation = function useCharacterSkinNavigation(availableCharacters, itemKey) {
   var _useState = React.useState(0),
     currentIndex = _useState[0],
     setCurrentIndex = _useState[1];
-  // Get available characters from metadata
-  var availableCharacters = item.metadataType === shared.MetadataType.CharacterSkin && ((_item$metadataConfig = item.metadataConfig) == null ? void 0 : _item$metadataConfig.availableCharacters) || [];
-  // Get the active character entity atlas info
-  var entityAtlasJSON = (_item$metadataConfig2 = item.metadataConfig) == null ? void 0 : _item$metadataConfig2.atlasJSON;
-  var entityAtlasIMG = (_item$metadataConfig3 = item.metadataConfig) == null ? void 0 : _item$metadataConfig3.atlasIMG;
-  // Effect to reset currentIndex when switching items
   React.useEffect(function () {
     setCurrentIndex(0);
-  }, [item._id]);
+  }, [itemKey]);
   var handlePreviousSkin = function handlePreviousSkin() {
     setCurrentIndex(function (prevIndex) {
       return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
@@ -57991,6 +57983,31 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
       return prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1;
     });
   };
+  var currentCharacter = availableCharacters[currentIndex];
+  return {
+    currentIndex: currentIndex,
+    currentCharacter: currentCharacter,
+    handlePreviousSkin: handlePreviousSkin,
+    handleNextSkin: handleNextSkin
+  };
+};
+
+var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
+  var _item$metadataConfig, _item$metadataConfig2, _item$metadataConfig3, _item$requiredAccount, _item$store;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType;
+  // Get available characters from metadata
+  var availableCharacters = item.metadataType === shared.MetadataType.CharacterSkin && ((_item$metadataConfig = item.metadataConfig) == null ? void 0 : _item$metadataConfig.availableCharacters) || [];
+  // Get the active character entity atlas info
+  var entityAtlasJSON = (_item$metadataConfig2 = item.metadataConfig) == null ? void 0 : _item$metadataConfig2.atlasJSON;
+  var entityAtlasIMG = (_item$metadataConfig3 = item.metadataConfig) == null ? void 0 : _item$metadataConfig3.atlasIMG;
+  var _useCharacterSkinNavi = useCharacterSkinNavigation(availableCharacters, item.key),
+    currentCharacter = _useCharacterSkinNavi.currentCharacter,
+    handlePreviousSkin = _useCharacterSkinNavi.handlePreviousSkin,
+    handleNextSkin = _useCharacterSkinNavi.handleNextSkin;
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
   var handleAddToCart = function handleAddToCart() {
     if (!hasRequiredAccount) return;
@@ -58007,8 +58024,9 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
   var getSpriteKey = function getSpriteKey(textureKey) {
     return textureKey + '/down/standing/0.png';
   };
-  var currentCharacter = availableCharacters[currentIndex];
-  return React__default.createElement(ItemWrapper, null, React__default.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(ItemWrapper, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React__default.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React__default.createElement(SpriteFromAtlas, {
     atlasJSON: entityAtlasJSON,
     atlasIMG: entityAtlasIMG,
     spriteKey: getSpriteKey(currentCharacter.textureKey),
@@ -58016,7 +58034,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React__default.createElement(SpriteFromAtlas, {
+  }) : item.texturePath ? React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58024,7 +58042,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$8, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
+  }) : React__default.createElement(DefaultIcon, null, "\uD83D\uDC64")), React__default.createElement(ItemDetails$1, null, React__default.createElement(Header$8, null, React__default.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React__default.createElement(SelectedSkinNav, null, React__default.createElement(SelectedSkin, null, "Selected:"), React__default.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -58042,7 +58060,11 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
 var ItemWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemWrapper",
   componentId: "sc-81xqsx-0"
-})(["display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);&:last-child{border-bottom:none;}"]);
+})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:", ";border-left:", ";&:last-child{border-bottom:none;}"], function (props) {
+  return props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent';
+}, function (props) {
+  return props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent';
+});
 var ItemIconContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemIconContainer",
   componentId: "sc-81xqsx-1"
@@ -58050,23 +58072,23 @@ var ItemIconContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
 var ItemDetails$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemDetails",
   componentId: "sc-81xqsx-2"
-})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:0.25rem;"]);
 var ItemName$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemName",
   componentId: "sc-81xqsx-3"
-})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
 var SelectedSkin = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__SelectedSkin",
   componentId: "sc-81xqsx-4"
-})(["font-family:'Press Start 2P',cursive;font-size:0.65rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.5rem;color:#fef08a;"]);
 var ItemPrice = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemPrice",
   componentId: "sc-81xqsx-5"
-})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
 var Controls = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__Controls",
   componentId: "sc-81xqsx-6"
-})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+})(["display:flex;align-items:center;gap:0.5rem;min-width:fit-content;"]);
 // Styled arrow override for inline nav arrows
 var SkinNavArrow = /*#__PURE__*/styled__default(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
@@ -58080,40 +58102,77 @@ var SelectedSkinNav = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreCharacterSkinRow__SelectedSkinNav",
   componentId: "sc-81xqsx-9"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
+var DefaultIcon = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreCharacterSkinRow__DefaultIcon",
+  componentId: "sc-81xqsx-10"
+})(["font-size:1.5rem;display:flex;align-items:center;justify-content:center;width:32px;height:32px;"]);
 
-var StoreItemRow = function StoreItemRow(_ref) {
-  var _item$requiredAccount;
-  var item = _ref.item,
-    atlasJSON = _ref.atlasJSON,
-    atlasIMG = _ref.atlasIMG,
-    onAddToCart = _ref.onAddToCart,
-    userAccountType = _ref.userAccountType,
-    _ref$showTextInput = _ref.showTextInput,
-    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput;
-  var _useState = React.useState(1),
+var useQuantityControl = function useQuantityControl(initialQuantity, min, max) {
+  if (initialQuantity === void 0) {
+    initialQuantity = 1;
+  }
+  if (min === void 0) {
+    min = 1;
+  }
+  if (max === void 0) {
+    max = 99;
+  }
+  var _useState = React.useState(initialQuantity),
     quantity = _useState[0],
     setQuantity = _useState[1];
-  var _useState2 = React.useState(''),
-    textInputValue = _useState2[0],
-    setTextInputValue = _useState2[1];
   var handleQuantityChange = function handleQuantityChange(e) {
-    var value = parseInt(e.target.value) || 1;
-    setQuantity(Math.min(Math.max(1, value), 99));
+    var value = parseInt(e.target.value) || min;
+    setQuantity(Math.min(Math.max(min, value), max));
   };
   var handleBlur = function handleBlur() {
-    if (quantity < 1) setQuantity(1);
-    if (quantity > 99) setQuantity(99);
+    if (quantity < min) setQuantity(min);
+    if (quantity > max) setQuantity(max);
   };
   var incrementQuantity = function incrementQuantity() {
     setQuantity(function (prev) {
-      return Math.min(prev + 1, 99);
+      return Math.min(prev + 1, max);
     });
   };
   var decrementQuantity = function decrementQuantity() {
     setQuantity(function (prev) {
-      return Math.max(1, prev - 1);
+      return Math.max(min, prev - 1);
     });
   };
+  var resetQuantity = function resetQuantity() {
+    setQuantity(initialQuantity);
+  };
+  return {
+    quantity: quantity,
+    setQuantity: setQuantity,
+    handleQuantityChange: handleQuantityChange,
+    handleBlur: handleBlur,
+    incrementQuantity: incrementQuantity,
+    decrementQuantity: decrementQuantity,
+    resetQuantity: resetQuantity
+  };
+};
+
+var StoreItemRow = function StoreItemRow(_ref) {
+  var _item$requiredAccount, _item$store;
+  var item = _ref.item,
+    atlasJSON = _ref.atlasJSON,
+    atlasIMG = _ref.atlasIMG,
+    onAddToCart = _ref.onAddToCart,
+    userAccountType = _ref.userAccountType,
+    _ref$showTextInput = _ref.showTextInput,
+    showTextInput = _ref$showTextInput === void 0 ? false : _ref$showTextInput,
+    _ref$textInputPlaceho = _ref.textInputPlaceholder,
+    textInputPlaceholder = _ref$textInputPlaceho === void 0 ? item.inputPlaceholder : _ref$textInputPlaceho;
+  var _useState = React.useState(''),
+    textInputValue = _useState[0],
+    setTextInputValue = _useState[1];
+  var _useQuantityControl = useQuantityControl(),
+    quantity = _useQuantityControl.quantity,
+    handleQuantityChange = _useQuantityControl.handleQuantityChange,
+    handleBlur = _useQuantityControl.handleBlur,
+    incrementQuantity = _useQuantityControl.incrementQuantity,
+    decrementQuantity = _useQuantityControl.decrementQuantity,
+    resetQuantity = _useQuantityControl.resetQuantity;
   var hasRequiredAccount = !((_item$requiredAccount = item.requiredAccountType) != null && _item$requiredAccount.length) || item.requiredAccountType.includes(userAccountType);
   var handleAddToCartInternal = function handleAddToCartInternal() {
     if (!hasRequiredAccount) return;
@@ -58124,10 +58183,12 @@ var StoreItemRow = function StoreItemRow(_ref) {
       setTextInputValue('');
     } else {
       onAddToCart(item, quantity);
-      setQuantity(1);
+      resetQuantity();
     }
   };
-  return React__default.createElement(ItemWrapper$1, null, React__default.createElement(ItemIconContainer$3, null, React__default.createElement(SpriteFromAtlas, {
+  return React__default.createElement(ItemWrapper$1, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React__default.createElement(ItemIconContainer$3, null, React__default.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58135,10 +58196,10 @@ var StoreItemRow = function StoreItemRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React__default.createElement(ItemDetails$2, null, React__default.createElement(ItemName$2, null, item.name), React__default.createElement(ItemPrice$1, null, "$", item.price)), React__default.createElement(Controls$1, null, showTextInput ? React__default.createElement(TextInput, {
+  })), React__default.createElement(ItemDetails$2, null, React__default.createElement(ItemName$2, null, item.name), React__default.createElement(ItemPrice$1, null, "$", item.price), React__default.createElement(ItemDescription, null, item.description)), React__default.createElement(Controls$1, null, showTextInput ? React__default.createElement(TextInput, {
     type: "text",
     value: textInputValue,
-    placeholder: "Enter value",
+    placeholder: textInputPlaceholder,
     onChange: function onChange(e) {
       return setTextInputValue(e.target.value);
     },
@@ -58169,7 +58230,11 @@ var StoreItemRow = function StoreItemRow(_ref) {
 var ItemWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemWrapper",
   componentId: "sc-ptotuo-0"
-})(["display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(255,255,255,0.1);&:last-child{border-bottom:none;}"]);
+})(["display:flex;align-items:center;gap:0.75rem;padding:0.5rem 1rem;border-bottom:1px solid rgba(255,255,255,0.1);background:", ";border-left:", ";&:last-child{border-bottom:none;}"], function (props) {
+  return props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent';
+}, function (props) {
+  return props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent';
+});
 var ItemIconContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemIconContainer",
   componentId: "sc-ptotuo-1"
@@ -58177,32 +58242,80 @@ var ItemIconContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
 var ItemDetails$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemDetails",
   componentId: "sc-ptotuo-2"
-})(["flex:1;display:flex;flex-direction:column;gap:0.5rem;"]);
+})(["flex:1;display:flex;flex-direction:column;gap:0.25rem;"]);
 var ItemName$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemName",
   componentId: "sc-ptotuo-3"
-})(["font-family:'Press Start 2P',cursive;font-size:0.875rem;color:#ffffff;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#ffffff;"]);
 var ItemPrice$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ItemPrice",
   componentId: "sc-ptotuo-4"
-})(["font-family:'Press Start 2P',cursive;font-size:0.75rem;color:#fef08a;"]);
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:#fef08a;"]);
+var ItemDescription = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemRow__ItemDescription",
+  componentId: "sc-ptotuo-5"
+})(["font-family:'Press Start 2P',cursive;font-size:0.625rem;color:rgba(255,255,255,0.7);line-height:1.4;"]);
 var Controls$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__Controls",
-  componentId: "sc-ptotuo-5"
-})(["display:flex;align-items:center;gap:1rem;min-width:fit-content;"]);
+  componentId: "sc-ptotuo-6"
+})(["display:flex;align-items:center;gap:0.5rem;min-width:fit-content;"]);
 var ArrowsContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "StoreItemRow__ArrowsContainer",
-  componentId: "sc-ptotuo-6"
+  componentId: "sc-ptotuo-7"
 })(["position:relative;display:flex;align-items:center;width:120px;height:42px;justify-content:space-between;"]);
 var QuantityInput = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "StoreItemRow__QuantityInput",
-  componentId: "sc-ptotuo-7"
+  componentId: "sc-ptotuo-8"
 })(["width:40px;text-align:center;margin:0 auto;font-size:0.875rem;background:rgba(0,0,0,0.2);color:#ffffff;border:none;padding:0.25rem;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}"]);
 var TextInput = /*#__PURE__*/styled__default.input.withConfig({
   displayName: "StoreItemRow__TextInput",
-  componentId: "sc-ptotuo-8"
+  componentId: "sc-ptotuo-9"
 })(["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 _useState = React.useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var _useState2 = React.useState('all'),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  var categoryOptions = React.useMemo(function () {
+    var uniqueCategories = Array.from(new Set(items.map(function (item) {
+      return item.itemType;
+    })));
+    var allCategories = ['all'].concat(uniqueCategories);
+    return allCategories.map(function (category, index) {
+      return {
+        id: index,
+        value: category,
+        option: category === 'all' ? 'All' : category
+      };
+    });
+  }, [items]);
+  var filteredItems = React.useMemo(function () {
+    return items.filter(function (item) {
+      var matchesSearch = item.name.toLowerCase().includes(searchQuery.toLowerCase());
+      var matchesCategory = selectedCategory === 'all' || item.itemType === selectedCategory;
+      return matchesSearch && matchesCategory;
+    }).sort(function (a, b) {
+      var _a$store, _b$store;
+      var aHighlighted = ((_a$store = a.store) == null ? void 0 : _a$store.isHighlighted) || false;
+      var bHighlighted = ((_b$store = b.store) == null ? void 0 : _b$store.isHighlighted) || false;
+      if (aHighlighted && !bHighlighted) return -1;
+      if (!aHighlighted && bHighlighted) return 1;
+      return 0;
+    });
+  }, [items, searchQuery, selectedCategory]);
+  return {
+    searchQuery: searchQuery,
+    setSearchQuery: setSearchQuery,
+    selectedCategory: selectedCategory,
+    setSelectedCategory: setSelectedCategory,
+    categoryOptions: categoryOptions,
+    filteredItems: filteredItems
+  };
+};
+
 var StoreItemsSection = function StoreItemsSection(_ref) {
   var items = _ref.items,
     onAddToCart = _ref.onAddToCart,
@@ -58211,17 +58324,17 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     userAccountType = _ref.userAccountType,
     _ref$textInputItemKey = _ref.textInputItemKeys,
     textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
-  var _useState = React.useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
-  var filteredItems = items.filter(function (item) {
-    return item.name.toLowerCase().includes(searchQuery.toLowerCase());
-  });
+  var _useStoreFiltering = useStoreFiltering(items),
+    searchQuery = _useStoreFiltering.searchQuery,
+    setSearchQuery = _useStoreFiltering.setSearchQuery,
+    setSelectedCategory = _useStoreFiltering.setSelectedCategory,
+    categoryOptions = _useStoreFiltering.categoryOptions,
+    filteredItems = _useStoreFiltering.filteredItems;
   var renderStoreItem = function renderStoreItem(item) {
     // Prefer a specialized character skin row when needed
     if (item.metadataType === shared.MetadataType.CharacterSkin) {
       return React__default.createElement(StoreCharacterSkinRow, {
-        key: item._id,
+        key: item.key,
         item: item,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
@@ -58230,9 +58343,9 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       });
     }
     // Render text input row when configured for this item key
-    if (textInputItemKeys.includes(item.key) || textInputItemKeys.includes(item._id)) {
+    if (textInputItemKeys.includes(item.key)) {
       return React__default.createElement(StoreItemRow, {
-        key: item._id,
+        key: item.key,
         item: item,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
@@ -58243,7 +58356,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     }
     // Fallback to standard arrow-based row
     return React__default.createElement(StoreItemRow, {
-      key: item._id,
+      key: item.key,
       item: item,
       atlasJSON: atlasJSON,
       atlasIMG: atlasIMG,
@@ -58251,19 +58364,40 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       userAccountType: userAccountType || shared.UserAccountTypes.Free
     });
   };
-  return React__default.createElement(ScrollableContent, {
+  return React__default.createElement(StoreContainer, null, React__default.createElement(SearchHeader$1, null, React__default.createElement(SearchBarContainer, null, React__default.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: setSearchQuery,
+    placeholder: "Search items..."
+  })), React__default.createElement(DropdownContainer$1, null, React__default.createElement(Dropdown, {
+    options: categoryOptions,
+    onChange: function onChange(value) {
+      return setSelectedCategory(value);
+    },
+    width: "100%"
+  }))), React__default.createElement(ScrollableContent, {
     items: filteredItems,
     renderItem: renderStoreItem,
-    emptyMessage: "No items available.",
-    searchOptions: {
-      value: searchQuery,
-      onChange: setSearchQuery,
-      placeholder: 'Search items...'
-    },
+    emptyMessage: "No items match your filters.",
     layout: "list",
-    maxHeight: "400px"
-  });
+    maxHeight: "350px"
+  }));
 };
+var StoreContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__StoreContainer",
+  componentId: "sc-l6f466-0"
+})(["display:flex;flex-direction:column;height:100%;gap:0.5rem;"]);
+var SearchHeader$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__SearchHeader",
+  componentId: "sc-l6f466-1"
+})(["display:flex;gap:0.5rem;align-items:center;padding-top:0.25rem;"]);
+var SearchBarContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__SearchBarContainer",
+  componentId: "sc-l6f466-2"
+})(["flex:0.75;"]);
+var DropdownContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "StoreItemsSection__DropdownContainer",
+  componentId: "sc-l6f466-3"
+})(["flex:0.25;min-width:140px;"]);
 
 var ShoppingCardHorizontal = function ShoppingCardHorizontal(_ref) {
   var title = _ref.title,
@@ -58328,13 +58462,30 @@ var CardFooter = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-ngkh06-6"
 })(["margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,0.1);"]);
 
+var usePackFiltering = function usePackFiltering(packs) {
+  var _useState = React.useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var filteredPacks = React.useMemo(function () {
+    return packs.filter(function (pack) {
+      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [packs, searchQuery]);
+  return {
+    searchQuery: searchQuery,
+    setSearchQuery: setSearchQuery,
+    filteredPacks: filteredPacks
+  };
+};
+
 var StorePacksSection = function StorePacksSection(_ref) {
   var packs = _ref.packs,
     onAddToCart = _ref.onAddToCart,
     onSelectPack = _ref.onSelectPack;
-  var _useState = React.useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
+  var _usePackFiltering = usePackFiltering(packs),
+    searchQuery = _usePackFiltering.searchQuery,
+    setSearchQuery = _usePackFiltering.setSearchQuery,
+    filteredPacks = _usePackFiltering.filteredPacks;
   var renderPackFooter = React.useCallback(function (pack) {
     return React__default.createElement(FooterContainer, null, React__default.createElement(Price, null, "$", pack.priceUSD), React__default.createElement(CTAButton, {
       icon: React__default.createElement(fa.FaCartPlus, null),
@@ -58357,11 +58508,6 @@ var StorePacksSection = function StorePacksSection(_ref) {
       }
     });
   }, [onSelectPack, renderPackFooter]);
-  var filteredPacks = React.useMemo(function () {
-    return packs.filter(function (pack) {
-      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
-    });
-  }, [packs, searchQuery]);
   return React__default.createElement(ScrollableContent, {
     items: filteredPacks,
     renderItem: renderPack,
@@ -58460,7 +58606,7 @@ var Store = function Store(_ref) {
     packs = _ref$packs === void 0 ? [] : _ref$packs,
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
-    _onPurchase = _ref.onPurchase,
+    _onPurchase2 = _ref.onPurchase,
     onShowHistory = _ref.onShowHistory,
     userAccountType = _ref.userAccountType,
     _ref$loading = _ref.loading,
@@ -58505,29 +58651,35 @@ var Store = function Store(_ref) {
     setCurrentMetadataItem = _useState4[1];
   var handleAddPackToCart = function handleAddPackToCart(pack) {
     var packItem = {
-      _id: pack.key,
       key: pack.key,
       name: pack.title,
+      description: pack.description || '',
       price: pack.priceUSD,
+      currency: shared.PaymentCurrency.USD,
       texturePath: pack.image["default"] || pack.image.src,
-      textureKey: pack.image["default"] || pack.image.src,
-      type: shared.ItemType.Consumable,
-      subType: shared.ItemSubType.Other,
-      description: pack.description || '',
-      fullDescription: pack.description || '',
-      textureAtlas: 'items',
-      weight: 0,
+      type: shared.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: shared.ItemType.Consumable,
+      itemSubType: shared.ItemSubType.Other,
       rarity: shared.ItemRarities.Common,
-      allowedEquipSlotType: [],
-      isEquipable: false,
+      weight: 0,
       isStackable: false,
-      isTwoHanded: false,
-      hasUseWith: false,
       maxStackSize: 1,
-      isUsable: false,
-      isStorable: true,
-      isSolid: false,
-      isItemContainer: false
+      isUsable: false
     };
     handleAddToCart(packItem, 1);
   };
@@ -58633,22 +58785,22 @@ var Store = function Store(_ref) {
     onRemoveFromCart: handleRemoveFromCart,
     onClose: closeCart,
     onPurchase: function () {
-      var _onPurchase2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+      var _onPurchase3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
-              return handleCartPurchase(_onPurchase);
+              _context2.next = 2;
+              return handleCartPurchase(_onPurchase2);
             case 2:
-              return _context.abrupt("return", true);
+              return _context2.abrupt("return", true);
             case 3:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2);
       }));
       function onPurchase() {
-        return _onPurchase2.apply(this, arguments);
+        return _onPurchase3.apply(this, arguments);
       }
       return onPurchase;
     }(),