@rpg-engine/long-bow 0.8.71 → 0.8.73

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useCallback, useContext,
 import styled, { css, keyframes, createGlobalStyle } 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, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, MetadataType, PurchaseType, UserAccountTypes, 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, RewardType, isMobileOrTablet, ItemSlotType, NPCSubtype, EntityAttackType, NPCAlignment, VideoGuideCategory, VideoGuideLanguage, CharacterClass, QuestStatus, getSPForLevel, getXPForLevel, MetadataType, PurchaseType, UserAccountTypes, PaymentCurrency, PeriodOfDay } 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, FaChevronUp, FaChevronDown, FaReddit, FaTrash, FaShoppingBag, FaInfoCircle, FaCartPlus, FaArrowLeft, FaHistory, FaShoppingCart } from 'react-icons/fa';
@@ -57631,7 +57631,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 === MetadataType.None)) {
+            if (!(!item.metadataType || item.metadataType !== MetadataType.CharacterSkin)) {
               _context.next = 2;
               break;
             }
@@ -57711,7 +57711,7 @@ var useStoreCart = function useStoreCart() {
             });
             return _context.abrupt("return");
           case 3:
-            if (!(item.metadataType && item.metadataType !== MetadataType.None)) {
+            if (!(item.metadataType === MetadataType.CharacterSkin)) {
               _context.next = 12;
               break;
             }
@@ -57827,7 +57827,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 PurchaseType.Pack;
   } else {
@@ -57959,25 +57963,13 @@ var EmptyMessage$1 = /*#__PURE__*/styled.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 = useState(0),
     currentIndex = _useState[0],
     setCurrentIndex = _useState[1];
-  // Get available characters from metadata
-  var availableCharacters = item.metadataType === 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
   useEffect(function () {
     setCurrentIndex(0);
-  }, [item._id]);
+  }, [itemKey]);
   var handlePreviousSkin = function handlePreviousSkin() {
     setCurrentIndex(function (prevIndex) {
       return prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1;
@@ -57988,6 +57980,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 === 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;
@@ -58004,8 +58021,9 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
   var getSpriteKey = function getSpriteKey(textureKey) {
     return textureKey + '/down/standing/0.png';
   };
-  var currentCharacter = availableCharacters[currentIndex];
-  return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React.createElement(SpriteFromAtlas, {
+  return React.createElement(ItemWrapper, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React.createElement(ItemIconContainer$2, null, entityAtlasJSON && entityAtlasIMG && currentCharacter ? React.createElement(SpriteFromAtlas, {
     atlasJSON: entityAtlasJSON,
     atlasIMG: entityAtlasIMG,
     spriteKey: getSpriteKey(currentCharacter.textureKey),
@@ -58013,7 +58031,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  }) : React.createElement(SpriteFromAtlas, {
+  }) : item.texturePath ? React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58021,7 +58039,7 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React.createElement(ItemDetails$1, null, React.createElement(Header$8, null, React.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
+  }) : React.createElement(DefaultIcon, null, "\uD83D\uDC64")), React.createElement(ItemDetails$1, null, React.createElement(Header$8, null, React.createElement(ItemName$1, null, item.name)), availableCharacters.length > 0 && currentCharacter && React.createElement(SelectedSkinNav, null, React.createElement(SelectedSkin, null, "Selected:"), React.createElement(SkinNavArrow, {
     direction: "left",
     onPointerDown: handlePreviousSkin,
     size: 24
@@ -58039,7 +58057,11 @@ var StoreCharacterSkinRow = function StoreCharacterSkinRow(_ref) {
 var ItemWrapper = /*#__PURE__*/styled.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.div.withConfig({
   displayName: "StoreCharacterSkinRow__ItemIconContainer",
   componentId: "sc-81xqsx-1"
@@ -58047,23 +58069,23 @@ var ItemIconContainer$2 = /*#__PURE__*/styled.div.withConfig({
 var ItemDetails$1 = /*#__PURE__*/styled.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.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.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.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.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(SelectArrow).withConfig({
   displayName: "StoreCharacterSkinRow__SkinNavArrow",
@@ -58077,40 +58099,77 @@ var SelectedSkinNav = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreCharacterSkinRow__SelectedSkinNav",
   componentId: "sc-81xqsx-9"
 })(["display:flex;align-items:center;gap:0.5rem;"]);
+var DefaultIcon = /*#__PURE__*/styled.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 = 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 = useState(initialQuantity),
     quantity = _useState[0],
     setQuantity = _useState[1];
-  var _useState2 = 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 = 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;
@@ -58121,10 +58180,12 @@ var StoreItemRow = function StoreItemRow(_ref) {
       setTextInputValue('');
     } else {
       onAddToCart(item, quantity);
-      setQuantity(1);
+      resetQuantity();
     }
   };
-  return React.createElement(ItemWrapper$1, null, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteFromAtlas, {
+  return React.createElement(ItemWrapper$1, {
+    "$isHighlighted": ((_item$store = item.store) == null ? void 0 : _item$store.isHighlighted) || false
+  }, React.createElement(ItemIconContainer$3, null, React.createElement(SpriteFromAtlas, {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     spriteKey: item.texturePath,
@@ -58132,10 +58193,10 @@ var StoreItemRow = function StoreItemRow(_ref) {
     height: 32,
     imgScale: 2,
     centered: true
-  })), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price)), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
+  })), React.createElement(ItemDetails$2, null, React.createElement(ItemName$2, null, item.name), React.createElement(ItemPrice$1, null, "$", item.price), React.createElement(ItemDescription, null, item.description)), React.createElement(Controls$1, null, showTextInput ? React.createElement(TextInput, {
     type: "text",
     value: textInputValue,
-    placeholder: "Enter value",
+    placeholder: textInputPlaceholder,
     onChange: function onChange(e) {
       return setTextInputValue(e.target.value);
     },
@@ -58166,7 +58227,11 @@ var StoreItemRow = function StoreItemRow(_ref) {
 var ItemWrapper$1 = /*#__PURE__*/styled.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.div.withConfig({
   displayName: "StoreItemRow__ItemIconContainer",
   componentId: "sc-ptotuo-1"
@@ -58174,32 +58239,80 @@ var ItemIconContainer$3 = /*#__PURE__*/styled.div.withConfig({
 var ItemDetails$2 = /*#__PURE__*/styled.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.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.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.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.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.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.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.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 = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var _useState2 = useState('all'),
+    selectedCategory = _useState2[0],
+    setSelectedCategory = _useState2[1];
+  var categoryOptions = 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 = 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,
@@ -58208,17 +58321,17 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     userAccountType = _ref.userAccountType,
     _ref$textInputItemKey = _ref.textInputItemKeys,
     textInputItemKeys = _ref$textInputItemKey === void 0 ? [] : _ref$textInputItemKey;
-  var _useState = 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 === MetadataType.CharacterSkin) {
       return React.createElement(StoreCharacterSkinRow, {
-        key: item._id,
+        key: item.key,
         item: item,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
@@ -58227,9 +58340,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.createElement(StoreItemRow, {
-        key: item._id,
+        key: item.key,
         item: item,
         atlasJSON: atlasJSON,
         atlasIMG: atlasIMG,
@@ -58240,7 +58353,7 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
     }
     // Fallback to standard arrow-based row
     return React.createElement(StoreItemRow, {
-      key: item._id,
+      key: item.key,
       item: item,
       atlasJSON: atlasJSON,
       atlasIMG: atlasIMG,
@@ -58248,19 +58361,40 @@ var StoreItemsSection = function StoreItemsSection(_ref) {
       userAccountType: userAccountType || UserAccountTypes.Free
     });
   };
-  return React.createElement(ScrollableContent, {
+  return React.createElement(StoreContainer, null, React.createElement(SearchHeader$1, null, React.createElement(SearchBarContainer, null, React.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: setSearchQuery,
+    placeholder: "Search items..."
+  })), React.createElement(DropdownContainer$1, null, React.createElement(Dropdown, {
+    options: categoryOptions,
+    onChange: function onChange(value) {
+      return setSelectedCategory(value);
+    },
+    width: "100%"
+  }))), React.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.div.withConfig({
+  displayName: "StoreItemsSection__StoreContainer",
+  componentId: "sc-l6f466-0"
+})(["display:flex;flex-direction:column;height:100%;gap:0.5rem;"]);
+var SearchHeader$1 = /*#__PURE__*/styled.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.div.withConfig({
+  displayName: "StoreItemsSection__SearchBarContainer",
+  componentId: "sc-l6f466-2"
+})(["flex:0.75;"]);
+var DropdownContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "StoreItemsSection__DropdownContainer",
+  componentId: "sc-l6f466-3"
+})(["flex:0.25;min-width:140px;"]);
 
 var ShoppingCardHorizontal = function ShoppingCardHorizontal(_ref) {
   var title = _ref.title,
@@ -58325,13 +58459,30 @@ var CardFooter = /*#__PURE__*/styled.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 = useState(''),
+    searchQuery = _useState[0],
+    setSearchQuery = _useState[1];
+  var filteredPacks = 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 = useState(''),
-    searchQuery = _useState[0],
-    setSearchQuery = _useState[1];
+  var _usePackFiltering = usePackFiltering(packs),
+    searchQuery = _usePackFiltering.searchQuery,
+    setSearchQuery = _usePackFiltering.setSearchQuery,
+    filteredPacks = _usePackFiltering.filteredPacks;
   var renderPackFooter = useCallback(function (pack) {
     return React.createElement(FooterContainer, null, React.createElement(Price, null, "$", pack.priceUSD), React.createElement(CTAButton, {
       icon: React.createElement(FaCartPlus, null),
@@ -58354,11 +58505,6 @@ var StorePacksSection = function StorePacksSection(_ref) {
       }
     });
   }, [onSelectPack, renderPackFooter]);
-  var filteredPacks = useMemo(function () {
-    return packs.filter(function (pack) {
-      return pack.title.toLowerCase().includes(searchQuery.toLowerCase());
-    });
-  }, [packs, searchQuery]);
   return React.createElement(ScrollableContent, {
     items: filteredPacks,
     renderItem: renderPack,
@@ -58457,7 +58603,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,
@@ -58502,29 +58648,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: PaymentCurrency.USD,
       texturePath: pack.image["default"] || pack.image.src,
-      textureKey: pack.image["default"] || pack.image.src,
-      type: ItemType.Consumable,
-      subType: ItemSubType.Other,
-      description: pack.description || '',
-      fullDescription: pack.description || '',
-      textureAtlas: 'items',
-      weight: 0,
+      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,
-      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);
   };
@@ -58630,22 +58782,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;
     }(),