@rpg-engine/long-bow 0.8.161 → 0.8.163

package/src/components/Store/Store.tsx

@@ -1,11 +1,16 @@
 import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
+import { Box } from 'pixelarticons/react/Box';
+import { Crown } from 'pixelarticons/react/Crown';
+import { Gift } from 'pixelarticons/react/Gift';
+import { Wallet } from 'pixelarticons/react/Wallet';
 import React, { ReactNode, useMemo, useState } from 'react';
 import { FaHistory, FaShoppingCart, FaWallet } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
-import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { Tabs } from '../shared/Tabs';
+import { LabelPill } from '../shared/LabelPill/LabelPill';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { CartView } from './CartView';
 import { useStoreCart } from './hooks/useStoreCart';
@@ -38,6 +43,7 @@ export interface IStoreProps {
   textInputItemKeys?: string[];
   customPacksContent?: React.ReactNode;
   customWalletContent?: React.ReactNode;
+  packsBadge?: string;
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -60,6 +66,7 @@ export const Store: React.FC<IStoreProps> = ({
   customPacksContent,
   customWalletContent,
   packsTabLabel = 'Packs',
+  packsBadge,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -83,7 +90,7 @@ export const Store: React.FC<IStoreProps> = ({
   const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
   const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
 
-  const handleAddPackToCart = (pack: IItemPack) => {
+  const handleAddPackToCart = (pack: IItemPack, quantity: number = 1) => {
     const packItem: IProductBlueprint = {
       key: pack.key,
       name: pack.title,
@@ -101,7 +108,7 @@ export const Store: React.FC<IStoreProps> = ({
       maxStackSize: 1,
       isUsable: false,
     };
-    handleAddToCart(packItem, 1);
+    handleAddToCart(packItem, quantity);
   };
 
   const filterItems = (
@@ -159,10 +166,11 @@ export const Store: React.FC<IStoreProps> = ({
   const tabIds: TabId[] = tabOrder ?? ['premium', 'packs', 'items'];
   const availableTabIds: TabId[] = tabIds.filter(id => !(hidePremiumTab && id === 'premium'));
 
-  const tabsMap: Record<string, { id: TabId; title: string; content: ReactNode }> = {
+  const tabsMap: Record<string, { id: TabId; title: ReactNode; icon: ReactNode; content: ReactNode }> = {
     premium: {
       id: 'premium',
       title: 'Premium',
+      icon: <Crown width={18} height={18} />,
       content: (
         <StorePacksSection
           packs={packs.filter(pack => pack.priceUSD >= 9.99)}
@@ -175,7 +183,13 @@ export const Store: React.FC<IStoreProps> = ({
     },
     packs: {
       id: 'packs',
-      title: packsTabLabel,
+      title: packsBadge ? (
+        <TabLabelWithBadge>
+          {packsTabLabel}
+          <LabelPill background="#f59e0b" borderColor="#f59e0b" color="#000">{packsBadge}</LabelPill>
+        </TabLabelWithBadge>
+      ) : packsTabLabel,
+      icon: <Gift width={18} height={18} />,
       content: customPacksContent ?? (
         <StorePacksSection
           packs={hidePremiumTab ? packs : packs.filter(pack => pack.priceUSD < 9.99)}
@@ -189,6 +203,7 @@ export const Store: React.FC<IStoreProps> = ({
     items: {
       id: 'items',
       title: 'Items',
+      icon: <Box width={18} height={18} />,
       content: (
         <StoreItemsSection
           items={filteredItems.items}
@@ -203,12 +218,11 @@ export const Store: React.FC<IStoreProps> = ({
     wallet: {
       id: 'wallet',
       title: 'Wallet',
+      icon: <Wallet width={18} height={18} />,
       content: customWalletContent ?? null,
     },
   };
 
-  const tabs = availableTabIds.map(id => tabsMap[id]);
-
   return (
     <DraggableContainer
       title="Store"
@@ -276,16 +290,14 @@ export const Store: React.FC<IStoreProps> = ({
             </CartButton>
           </TopBar>
           <MainContent>
-            <InternalTabs
-              tabs={tabs}
-              activeTextColor="#000000"
-              activeColor="#fef08a"
-              inactiveColor="#6b7280"
-              borderColor="#f59e0b"
-              hoverColor="#fef3c7"
-              activeTab={activeTab}
-              onTabChange={(tabId: string) => setActiveTab(tabId as TabId)}
+            <Tabs
+              options={availableTabIds.map(id => ({ id, label: tabsMap[id].title, icon: tabsMap[id].icon }))}
+              activeTabId={activeTab}
+              onTabChange={(tabId) => setActiveTab(tabId as TabId)}
             />
+            <TabContent>
+              {tabsMap[activeTab]?.content}
+            </TabContent>
           </MainContent>
           {cartItems.length > 0 && (
             <Footer>
@@ -349,12 +361,12 @@ const MainContent = styled.div`
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
+`;
 
-  .rpgui-tabs-content {
-    flex: 1;
-    overflow-y: auto;
-    padding-right: 0.5rem;
-  }
+const TabContent = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 0.5rem;
 `;
 
 const Footer = styled.div`
@@ -386,6 +398,13 @@ const CartInfo = styled.div`
   }
 `;
 
+const TabLabelWithBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+
 const LoadingMessage = styled.div`
   text-align: center;
   color: ${uiColors.white};

package/src/components/Store/StoreItemRow.tsx

@@ -4,6 +4,7 @@ import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { ItemRowWrapper } from '../shared/ItemRowWrapper';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { useQuantityControl } from '../../hooks/useQuantityControl';
 
@@ -56,27 +57,29 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   };
 
   return (
-    <ItemWrapper $isHighlighted={item.store?.isHighlighted || false}>
-      <ItemIconContainer>
-        <SpriteFromAtlas
-          atlasJSON={atlasJSON}
-          atlasIMG={atlasIMG}
-          spriteKey={item.texturePath}
-          width={32}
-          height={32}
-          imgScale={2}
-          centered
-        />
-      </ItemIconContainer>
-
-      <ItemDetails>
-        <ItemName>{item.name}</ItemName>
-        <ItemPrice>
-          ${item.price}
-          {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
-        </ItemPrice>
-        <ItemDescription>{item.description}</ItemDescription>
-      </ItemDetails>
+    <ItemRowWrapper $isHighlighted={item.store?.isHighlighted || false}>
+      <LeftSection>
+        <ItemIconContainer>
+          <SpriteFromAtlas
+            atlasJSON={atlasJSON}
+            atlasIMG={atlasIMG}
+            spriteKey={item.texturePath}
+            width={32}
+            height={32}
+            imgScale={2}
+            centered
+          />
+        </ItemIconContainer>
+
+        <ItemDetails>
+          <ItemName>{item.name}</ItemName>
+          <ItemPrice>
+            ${item.price}
+            {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
+          </ItemPrice>
+          <ItemDescription>{item.description}</ItemDescription>
+        </ItemDetails>
+      </LeftSection>
 
       <Controls>
         {/* Show text input if configured, else show arrows only for stackable items */}
@@ -121,24 +124,16 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
           disabled={!hasRequiredAccount}
         />
       </Controls>
-    </ItemWrapper>
+    </ItemRowWrapper>
   );
 };
 
-const ItemWrapper = styled.div<{ $isHighlighted: boolean }>`
+const LeftSection = styled.div`
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  background: ${props =>
-    props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent'};
-  border-left: ${props =>
-    props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent'};
-
-  &:last-child {
-    border-bottom: none;
-  }
+  flex: 1;
+  min-width: 0;
 `;
 
 const ItemIconContainer = styled.div`

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
 import { StoreItemRow } from '../StoreItemRow';
-import { Dropdown } from '../../Dropdown';
+import { SegmentedToggle } from '../../shared/SegmentedToggle';
 import { SearchBar } from '../../shared/SearchBar/SearchBar';
 import { useStoreFiltering } from '../../../hooks/useStoreFiltering';
 
@@ -37,6 +37,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   const {
     searchQuery,
     setSearchQuery,
+    selectedCategory,
     setSelectedCategory,
     categoryOptions,
     filteredItems,
@@ -93,13 +94,11 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
             placeholder="Search items..."
           />
         </SearchBarContainer>
-        <DropdownContainer>
-          <Dropdown
-            options={categoryOptions}
-            onChange={value => setSelectedCategory(value as ItemType | 'all')}
-            width="100%"
-          />
-        </DropdownContainer>
+        <SegmentedToggle
+          options={categoryOptions.map(opt => ({ id: opt.value, label: opt.option }))}
+          activeId={selectedCategory}
+          onChange={id => setSelectedCategory(id as ItemType | 'all')}
+        />
       </SearchHeader>
 
       <ScrollableContent
@@ -130,8 +129,3 @@ const SearchHeader = styled.div`
 const SearchBarContainer = styled.div`
   flex: 0.75;
 `;
-
-const DropdownContainer = styled.div`
-  flex: 0.25;
-  min-width: 140px;
-`;

package/src/components/Store/sections/StorePacksSection.tsx

@@ -3,22 +3,76 @@ import React, { useCallback } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
+import { ItemRowWrapper } from '../../shared/ItemRowWrapper';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
+import { SelectArrow } from '../../Arrow/SelectArrow';
 import { usePackFiltering } from '../../../hooks/usePackFiltering';
+import { useQuantityControl } from '../../../hooks/useQuantityControl';
 
 interface IStorePacksSectionProps {
   packs: IItemPack[];
-  onAddToCart: (pack: IItemPack) => void;
+  onAddToCart: (pack: IItemPack, quantity: number) => void;
   onSelectPack?: (pack: IItemPack) => void;
   atlasJSON?: any;
   atlasIMG?: string;
 }
 
+interface IPackRowItemProps {
+  pack: IItemPack;
+  onAddToCart: (pack: IItemPack, quantity: number) => void;
+  renderPackIcon: (pack: IItemPack) => React.ReactNode;
+}
+
+const PackRowItem: React.FC<IPackRowItemProps> = ({ pack, onAddToCart, renderPackIcon }) => {
+  const { quantity, handleQuantityChange, handleBlur, incrementQuantity, decrementQuantity, resetQuantity } = useQuantityControl();
+
+  const handleAdd = () => {
+    onAddToCart(pack, quantity);
+    resetQuantity();
+  };
+
+  return (
+    <PackRow>
+      <LeftSection>
+        <PackIconContainer>
+          {renderPackIcon(pack)}
+        </PackIconContainer>
+
+        <PackDetails>
+          <PackName>{pack.title}</PackName>
+          <PackPrice>${pack.priceUSD}</PackPrice>
+          {pack.description && <PackDescription>{pack.description}</PackDescription>}
+        </PackDetails>
+      </LeftSection>
+
+      <Controls>
+        <ArrowsContainer>
+          <SelectArrow direction="left" onPointerDown={decrementQuantity} size={24} />
+          <QuantityInput
+            type="number"
+            value={quantity}
+            onChange={handleQuantityChange}
+            onBlur={handleBlur}
+            min={1}
+            max={99}
+            className="rpgui-input"
+          />
+          <SelectArrow direction="right" onPointerDown={incrementQuantity} size={24} />
+        </ArrowsContainer>
+        <CTAButton
+          icon={<FaCartPlus />}
+          label="Add"
+          onClick={handleAdd}
+        />
+      </Controls>
+    </PackRow>
+  );
+};
+
 export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   packs,
   onAddToCart,
-  onSelectPack,
   atlasJSON,
   atlasIMG,
 }) => {
@@ -42,30 +96,14 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
 
   const renderPack = useCallback(
     (pack: IItemPack) => (
-      <PackRow key={pack.key} onClick={() => onSelectPack?.(pack)}>
-        <PackIconContainer>
-          {renderPackIcon(pack)}
-        </PackIconContainer>
-
-        <PackDetails>
-          <PackName>{pack.title}</PackName>
-          <PackPrice>${pack.priceUSD}</PackPrice>
-          {pack.description && <PackDescription>{pack.description}</PackDescription>}
-        </PackDetails>
-
-        <Controls>
-          <CTAButton
-            icon={<FaCartPlus />}
-            label="Add"
-            onClick={e => {
-              e.stopPropagation();
-              onAddToCart(pack);
-            }}
-          />
-        </Controls>
-      </PackRow>
+      <PackRowItem
+        key={pack.key}
+        pack={pack}
+        onAddToCart={onAddToCart}
+        renderPackIcon={renderPackIcon}
+      />
     ),
-    [onSelectPack, onAddToCart]
+    [onAddToCart, renderPackIcon]
   );
 
   return (
@@ -84,21 +122,14 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   );
 };
 
-const PackRow = styled.div`
+const PackRow = styled(ItemRowWrapper)``;
+
+const LeftSection = styled.div`
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  cursor: pointer;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.04);
-  }
+  flex: 1;
+  min-width: 0;
 `;
 
 const PackIconContainer = styled.div`
@@ -146,5 +177,32 @@ const PackDescription = styled.div`
 const Controls = styled.div`
   display: flex;
   align-items: center;
+  gap: 0.5rem;
   flex-shrink: 0;
 `;
+
+const ArrowsContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 120px;
+  height: 42px;
+  justify-content: space-between;
+`;
+
+const QuantityInput = styled.input`
+  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;
+  }
+`;

package/src/components/shared/ItemRowWrapper.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const ItemRowWrapper = styled.div<{ $isHighlighted?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 1rem;
+  margin-bottom: 4px;
+  background: ${p => p.$isHighlighted ? 'rgba(255, 215, 0, 0.08)' : 'rgba(0, 0, 0, 0.25)'};
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border-left: 4px solid ${p => p.$isHighlighted ? '#ffd700' : 'transparent'};
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.2);
+    border-left-color: #f59e0b;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-1px);
+  }
+`;

package/src/stories/Features/store/Store.stories.tsx

@@ -237,8 +237,9 @@ export const Default: Story = {
       atlasIMG={itemsAtlasIMG}
       hidePremiumTab={true}
       tabOrder={['items', 'packs']}
-      defaultActiveTab="items"
+      defaultActiveTab="packs"
       textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      packsBadge="SAVE"
     />
   ),
 };

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -43,13 +43,26 @@ const mockYourBuyOrders: IMarketplaceBuyOrderItem[] = [
 ];
 
 const mockOpenBuyOrders: IMarketplaceBuyOrderItem[] = [
+  // Abyssal Tide Staff — single request
   { _id: 'obo-1', owner: 'player-2', itemBlueprintKey: 'items/abyssal-tide-staff', itemRarity: 'Epic', maxPrice: 1500, escrowedGold: 1500, fee: 75, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  // Wooden Shield — single request
   { _id: 'obo-2', owner: 'player-3', itemBlueprintKey: 'items/wooden-shield', maxPrice: 200, escrowedGold: 200, fee: 10, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(5), updatedAt: daysAgo(5) },
-  { _id: 'obo-3', owner: 'player-4', itemBlueprintKey: 'items/fire-wand', itemRarity: 'Rare', maxPrice: 800, escrowedGold: 800, fee: 40, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
-  { _id: 'obo-4', owner: 'player-5', itemBlueprintKey: 'items/broad-sword', maxPrice: 350, escrowedGold: 350, fee: 17, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  // Fire Wand — 2 requests (grouped)
+  { _id: 'obo-3a', owner: 'player-4', itemBlueprintKey: 'items/fire-wand', itemRarity: 'Rare', maxPrice: 800, escrowedGold: 800, fee: 40, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  { _id: 'obo-3b', owner: 'player-10', itemBlueprintKey: 'items/fire-wand', maxPrice: 550, escrowedGold: 550, fee: 27, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
+  // Broad Sword — 3 requests (grouped)
+  { _id: 'obo-4a', owner: 'player-5', itemBlueprintKey: 'items/broad-sword', maxPrice: 350, escrowedGold: 350, fee: 17, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { _id: 'obo-4b', owner: 'player-11', itemBlueprintKey: 'items/broad-sword', itemRarity: 'Rare', maxPrice: 480, escrowedGold: 480, fee: 24, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { _id: 'obo-4c', owner: 'player-12', itemBlueprintKey: 'items/broad-sword', maxPrice: 270, escrowedGold: 270, fee: 13, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  // Barbarian Helmet — single request
   { _id: 'obo-5', owner: 'player-6', itemBlueprintKey: 'items/barbarian-helmet', itemRarity: 'Uncommon', maxPrice: 600, escrowedGold: 600, fee: 30, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
-  { _id: 'obo-6', owner: 'player-7', itemBlueprintKey: 'items/leather-armor', maxPrice: 420, escrowedGold: 420, fee: 21, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
-  { _id: 'obo-7', owner: 'player-8', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Legendary', maxPrice: 5000, escrowedGold: 5000, fee: 250, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  // Leather Armor — 2 requests (grouped)
+  { _id: 'obo-6a', owner: 'player-7', itemBlueprintKey: 'items/leather-armor', maxPrice: 420, escrowedGold: 420, fee: 21, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
+  { _id: 'obo-6b', owner: 'player-13', itemBlueprintKey: 'items/leather-armor', itemRarity: 'Uncommon', maxPrice: 380, escrowedGold: 380, fee: 19, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  // Angelic Sword — 2 requests (grouped)
+  { _id: 'obo-7a', owner: 'player-8', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Legendary', maxPrice: 5000, escrowedGold: 5000, fee: 250, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  { _id: 'obo-7b', owner: 'player-14', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Epic', maxPrice: 3500, escrowedGold: 3500, fee: 175, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  // Greater Life Potion — single request
   { _id: 'obo-8', owner: 'player-9', itemBlueprintKey: 'items/greater-life-potion', maxPrice: 90, stackQty: 10, escrowedGold: 900, fee: 45, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
 ];
 
@@ -169,7 +182,7 @@ const Template: Story = () => {
         onYourBuyOrdersPageChange={p => console.log('your orders page:', p)}
         onCancelBuyOrder={id => setYourBuyOrders(prev => prev.filter(o => o._id !== id))}
         openBuyOrders={mockOpenBuyOrders}
-        openBuyOrdersTotal={mockOpenBuyOrders.length} // 8 items → pagination shows (page size = 5)
+        openBuyOrdersTotal={mockOpenBuyOrders.length}
         openBuyOrdersPage={1}
         onOpenBuyOrdersPageChange={(p: number) => console.log('open orders page:', p)}
         // Blueprint Search props