@rpg-engine/long-bow 0.8.212 → 0.8.214

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.212",
+  "version": "0.8.214",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
-    "prepare": "echo skip",
+    "prepare": "tsdx build",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",

package/src/components/Marketplace/Marketplace.tsx

@@ -236,7 +236,8 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
         if (onClose) onClose();
       }}
       isFullScreen={fullScreen}
-      width="920px"
+      width="1050px"
+      minWidth="750px"
       cancelDrag="#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
       scale={scale}
     >

package/src/components/Store/Store.tsx

@@ -49,6 +49,10 @@ export interface IStoreProps {
   customHistoryContent?: React.ReactNode;
   /** When true the store renders full-screen (useful on mobile). */
   fullScreen?: boolean;
+  /** Override the DraggableContainer width (e.g. "90vw"). Defaults to "1000px". */
+  containerWidth?: string;
+  /** Override the DraggableContainer height (e.g. "80vh"). Defaults to "auto". */
+  containerHeight?: string;
   packsBadge?: string;
   featuredItems?: IFeaturedItem[];
   onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;
@@ -110,6 +114,8 @@ export const Store: React.FC<IStoreProps> = ({
   customWalletContent,
   customHistoryContent,
   fullScreen = false,
+  containerWidth,
+  containerHeight,
   packsTabLabel = 'Packs',
   packsBadge,
   featuredItems,
@@ -135,11 +141,18 @@ export const Store: React.FC<IStoreProps> = ({
   const defaultTabOrder: TabId[] = ['premium', 'packs', 'items'];
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
-    const initialTabs = (tabOrder ?? defaultTabOrder).filter(id => !(hidePremiumTab && id === 'premium'));
-    if (defaultActiveTab && initialTabs.includes(defaultActiveTab)) {
+    const allTabIds: TabId[] = [
+      ...(tabOrder ?? defaultTabOrder),
+      ...(customCharactersContent ? ['characters' as TabId] : []),
+      ...(onRedeem ? ['redeem' as TabId] : []),
+      ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
+      ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : []),
+    ];
+    const validTabs = Array.from(new Set(allTabIds.filter(id => !(hidePremiumTab && id === 'premium'))));
+    if (defaultActiveTab && validTabs.includes(defaultActiveTab)) {
       return defaultActiveTab;
     }
-    return initialTabs[0] ?? (hidePremiumTab ? 'items' : 'premium');
+    return validTabs[0] ?? (hidePremiumTab ? 'items' : 'premium');
   });
   const {
     cartItems,
@@ -355,7 +368,7 @@ export const Store: React.FC<IStoreProps> = ({
     },
     characters: {
       id: 'characters',
-      title: 'Characters',
+      title: 'Char Trade',
       icon: <FaUsers size={16} />,
       content: customCharactersContent ?? null,
     },
@@ -397,9 +410,9 @@ export const Store: React.FC<IStoreProps> = ({
     <DraggableContainer
       title="Store"
       onCloseButton={onClose}
-      width="850px"
-      minWidth="600px"
-      height="auto"
+      width={containerWidth ?? "1000px"}
+      minWidth="700px"
+      height={containerHeight ?? "auto"}
       type={RPGUIContainerTypes.Framed}
       cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
       isFullScreen={fullScreen}
@@ -417,7 +430,7 @@ export const Store: React.FC<IStoreProps> = ({
           onRemoveFromCart={handleRemoveFromCartTracked}
           onClose={closeCart}
           onPurchase={async () => {
-            await handleCartPurchase(onPurchase);
+            handleCartPurchase(onPurchase);
             return true;
           }}
           atlasJSON={atlasJSON}
@@ -482,21 +495,23 @@ export const Store: React.FC<IStoreProps> = ({
           )}
           <MainContent>
             <HeaderRow>
-              <Tabs
-                options={availableTabIds.map(id => ({ id, label: tabsMap[id]?.title, icon: tabsMap[id]?.icon }))}
-                activeTabId={activeTab}
-                onTabChange={(tabId) => {
-                  const nextTab = tabId as TabId;
-                  setActiveTab(nextTab);
-                  if (onTabChange) {
-                    const itemCount = nextTab === 'items' ? filteredItems.items.length
-                      : nextTab === 'premium' ? filteredItems.premium.length
-                      : nextTab === 'packs' ? packs.length
-                      : 0;
-                    onTabChange(nextTab, itemCount);
-                  }
-                }}
-              />
+              <TabsFlexWrapper>
+                <Tabs
+                  options={availableTabIds.map(id => ({ id, label: tabsMap[id]?.title, icon: tabsMap[id]?.icon }))}
+                  activeTabId={activeTab}
+                  onTabChange={(tabId) => {
+                    const nextTab = tabId as TabId;
+                    setActiveTab(nextTab);
+                    if (onTabChange) {
+                      const itemCount = nextTab === 'items' ? filteredItems.items.length
+                        : nextTab === 'premium' ? filteredItems.premium.length
+                        : nextTab === 'packs' ? packs.length
+                        : 0;
+                      onTabChange(nextTab, itemCount);
+                    }
+                  }}
+                />
+              </TabsFlexWrapper>
               <CartButtonWrapper>
                 <CTAButton
                   icon={<FaShoppingCart />}
@@ -548,15 +563,21 @@ const Container = styled.div`
 
 const HeaderRow = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: space-between;
   margin-bottom: 0.25rem;
   padding-top: 10px;
   padding-right: 12px;
 `;
 
+const TabsFlexWrapper = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
 const CartButtonWrapper = styled.div`
   position: relative;
+  flex-shrink: 0;
 `;
 
 const CartBadge = styled.div`

package/src/components/shared/Tabs/Tabs.tsx

@@ -37,6 +37,11 @@ const TabsContainer = styled.div`
   margin: 0 auto 15px auto;
   border-bottom: 2px solid rgba(255, 255, 255, 0.1);
   padding-bottom: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
 const TabButton = styled.button<{ $active: boolean }>`

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

@@ -299,7 +299,7 @@ const mockPacks: IItemPack[] = [
 
 ];
 
-// Create the story with the static mock data
+// Create the story with the static mock data — all tabs enabled so layout breaks are visible
 export const Default: Story = {
   render: () => (
     <Store
@@ -310,6 +310,11 @@ export const Default: Story = {
         console.log('Purchase details:', purchase);
         return Promise.resolve(true);
       }}
+      customCharactersContent={
+        <div style={{ padding: '1rem', color: '#fff', fontFamily: "'Press Start 2P', cursive", fontSize: '0.6rem', textAlign: 'center', marginTop: '2rem' }}>
+          Character trading content (consumer-provided)
+        </div>
+      }
       customWalletContent={<DCWalletContent
         dcBalance={150000000} // 150M
         historyData={{ transactions: [], totalPages: 1, currentPage: 1 }}
@@ -328,11 +333,14 @@ export const Default: Story = {
         loading={false}
         onRequestHistory={() => {}}
       />}
+      onRedeem={async (code: string) => {
+        if (code === 'CHB-550-ABCDEF1234') return { success: true, dcAmount: 550 };
+        return { success: false, error: 'Invalid voucher code.' };
+      }}
       onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
-      hidePremiumTab={true}
-      tabOrder={['items', 'packs']}
+      tabOrder={['premium', 'packs', 'items']}
       defaultActiveTab="packs"
       textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
       packsBadge="SAVE"
@@ -653,6 +661,38 @@ export const INR: Story = {
   ),
 };
 
+export const WithCharTradeTab: Story = {
+  render: () => (
+    <Store
+      items={allStoreItems}
+      packs={mockPacks}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(purchase: Partial<IPurchase>) => {
+        console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
+      }}
+      customCharactersContent={
+        <div style={{ padding: '1rem', color: '#fff', fontFamily: "'Press Start 2P', cursive", fontSize: '0.6rem', textAlign: 'center', marginTop: '2rem' }}>
+          Character trading content goes here (provided by consumer)
+        </div>
+      }
+      onClose={() => console.log('Store closed')}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      hidePremiumTab={true}
+      tabOrder={['items', 'packs']}
+      defaultActiveTab="characters"
+      onTabChange={(tab, count) => console.log('[tracking] tab_change', { tab, count })}
+      onCartOpen={() => console.log('[tracking] cart_opened')}
+      onAddToCart={(item, qty) => console.log('[tracking] add_to_cart', { key: item.key, qty })}
+      onRemoveFromCart={(key) => console.log('[tracking] remove_from_cart', { key })}
+      onCheckoutStart={(items, total) => console.log('[tracking] checkout_start', { items, total })}
+      onPurchaseSuccess={(items, total) => console.log('[tracking] purchase_success', { items, total })}
+      onPurchaseError={(error) => console.log('[tracking] purchase_error', { error })}
+    />
+  ),
+};
+
 export const WithRedeemTab: Story = {
   render: () => (
     <Store