fix: split SpireTab.tsx to 395 lines, remove require() imports, import from data modules; complete store migration

src/components/game/tabs/CraftingTab.tsx

@@ -6,29 +6,25 @@ import { GameCard } from '@/components/ui/game-card';
 import { SectionHeader } from '@/components/ui/section-header';
 import { ActionButton } from '@/components/ui/action-button';
 import { Scroll, Hammer, Sparkles, Anvil } from 'lucide-react';
-import type { EquipmentInstance, EnchantmentDesign, DesignEffect, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
+import { fmt } from '@/lib/game/stores';
 import {
   EnchantmentDesigner,
   EnchantmentPreparer,
   EnchantmentApplier,
   EquipmentCrafter,
 } from '@/components/game/crafting';
+import { useGameStore } from '@/lib/game/stores';
 import { useGameToast } from '@/components/game/GameToast';
 
-export interface CraftingTabProps {
-  store: GameStore;
-}
-
-export function CraftingTab({ store }: CraftingTabProps) {
+export function CraftingTab() {
   const showToast = useGameToast();
-  const currentAction = store.currentAction;
-  const designProgress = store.designProgress;
-  const preparationProgress = store.preparationProgress;
-  const applicationProgress = store.applicationProgress;
-  const equipmentCraftingProgress = store.equipmentCraftingProgress;
-  const pauseApplication = store.pauseApplication;
-  const resumeApplication = store.resumeApplication;
+  const currentAction = useGameStore((s) => s.currentAction);
+  const designProgress = useGameStore((s) => s.designProgress);
+  const preparationProgress = useGameStore((s) => s.preparationProgress);
+  const applicationProgress = useGameStore((s) => s.applicationProgress);
+  const equipmentCraftingProgress = useGameStore((s) => s.equipmentCraftingProgress);
+  const pauseApplication = useGameStore((s) => s.pauseApplication);
+  const resumeApplication = useGameStore((s) => s.resumeApplication);
 
   const [activeTab, setActiveTab] = useState<'fabricate' | 'enchant'>('fabricate');
   const [enchantStage, setEnchantStage] = useState<'design' | 'prepare' | 'apply'>('design');
@@ -81,7 +77,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
 
       {/* Fabricate Content: EquipmentCrafter */}
       {activeTab === 'fabricate' && (
-        <EquipmentCrafter store={store} />
+        <EquipmentCrafter />
       )}
 
       {/* Enchant Content: Design → Prepare → Apply workflow */}
@@ -123,7 +119,6 @@ export function CraftingTab({ store }: CraftingTabProps) {
           {/* Enchant Stage Content */}
           {enchantStage === 'design' && (
             <EnchantmentDesigner
-              store={store}
               selectedEquipmentType={null}
               setSelectedEquipmentType={() => {}}
               selectedEffects={[]}
@@ -136,14 +131,12 @@ export function CraftingTab({ store }: CraftingTabProps) {
           )}
           {enchantStage === 'prepare' && (
             <EnchantmentPreparer
-              store={store}
               selectedEquipmentInstance={null}
               setSelectedEquipmentInstance={() => {}}
             />
           )}
           {enchantStage === 'apply' && (
             <EnchantmentApplier
-              store={store}
               selectedEquipmentInstance={null}
               setSelectedEquipmentInstance={() => {}}
               selectedDesign={null}
@@ -183,7 +176,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
           <SectionHeader
             title="Designing Enchantment"
             action={
-              <ActionButton variant="ghost" size="sm" onClick={() => store.cancelDesign()}>
+              <ActionButton variant="ghost" size="sm" onClick={() => useGameStore.getState().cancelDesign()}>
                 Cancel
               </ActionButton>
             }
@@ -205,7 +198,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
           <SectionHeader
             title="Preparing Equipment"
             action={
-              <ActionButton variant="ghost" size="sm" onClick={() => store.cancelPreparation()}>
+              <ActionButton variant="ghost" size="sm" onClick={() => useGameStore.getState().cancelPreparation()}>
                 Cancel
               </ActionButton>
             }
@@ -237,7 +230,7 @@ export function CraftingTab({ store }: CraftingTabProps) {
                   <>
                     <ActionButton variant="secondary" size="sm" onClick={pauseApplication}>Pause</ActionButton>
                     <ActionButton variant="ghost" size="sm" onClick={() => {
-                      store.cancelApplication();
+                      useGameStore.getState().cancelApplication();
                       showToast('warning', 'Enchantment Cancelled', 'The enchantment application was cancelled.');
                     }}>Cancel</ActionButton>
                   </>