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

src/components/game/crafting/EnchantmentApplier.tsx

@@ -10,11 +10,11 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
 import type { EquipmentInstance, EnchantmentDesign, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, EquipmentSlot } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
+import { fmt } from '@/lib/game/stores';
 import { CheckCircle, Sparkles } from 'lucide-react';
+import { useGameStore } from '@/lib/game/stores';
 
 export interface EnchantmentApplierProps {
-  store: GameStore;
   selectedEquipmentInstance: string | null;
   setSelectedEquipmentInstance: (id: string | null) => void;
   selectedDesign: string | null;
@@ -24,7 +24,6 @@ export interface EnchantmentApplierProps {
 }
 
 export function EnchantmentApplier({
-  store,
   selectedEquipmentInstance,
   setSelectedEquipmentInstance,
   selectedDesign,
@@ -32,15 +31,15 @@ export function EnchantmentApplier({
   onEnchantmentApplied,
   onCapacityExceeded,
 }: EnchantmentApplierProps) {
-  const equippedInstances = store.equippedInstances;
-  const equipmentInstances = store.equipmentInstances;
-  const enchantmentDesigns = store.enchantmentDesigns;
-  const applicationProgress = store.applicationProgress;
-  const rawMana = store.rawMana;
-  const startApplying = store.startApplying;
-  const pauseApplication = store.pauseApplication;
-  const resumeApplication = store.resumeApplication;
-  const cancelApplication = store.cancelApplication;
+  const equippedInstances = useGameStore((s) => s.equippedInstances);
+  const equipmentInstances = useGameStore((s) => s.equipmentInstances);
+  const enchantmentDesigns = useGameStore((s) => s.enchantmentDesigns);
+  const applicationProgress = useGameStore((s) => s.applicationProgress);
+  const rawMana = useGameStore((s) => s.rawMana);
+  const startApplying = useGameStore((s) => s.startApplying);
+  const pauseApplication = useGameStore((s) => s.pauseApplication);
+  const resumeApplication = useGameStore((s) => s.resumeApplication);
+  const cancelApplication = useGameStore((s) => s.cancelApplication);
 
   // Get equipped items as array - ONLY show items tagged 'Ready for Enchantment' (requirement cr5)
   const equippedItems = Object.entries(equippedInstances)
@@ -119,7 +118,8 @@ export function EnchantmentApplier({
                         ${selectedEquipmentInstance === instance.instanceId
                           ? 'border-[var(--mana-light)] bg-[var(--mana-light)]/10'
                           : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
-                        }`}
+                        }
+                      `}
                       onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
                       role="button"
                       tabIndex={0}
@@ -159,7 +159,8 @@ export function EnchantmentApplier({
                         ${selectedDesign === design.id
                           ? 'border-[var(--mana-stellar)] bg-[var(--mana-stellar)]/10'
                           : 'border-[var(--border-default)] bg-[var(--bg-sunken)]/50 hover:border-[var(--border-default)]'
-                        }`}
+                        }
+                      `}
                       onClick={() => setSelectedDesign(design.id)}
                       role="button"
                       tabIndex={0}
@@ -252,7 +253,7 @@ export function EnchantmentApplier({
                   <ul className="list-disc list-inside mt-1">
                     {design.effects.map(eff => (
                       <li key={eff.effectId} className="text-[var(--text-secondary)]">
-                        {ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
+                        {ENCHANTMENT_EFFECT_S[eff.effectId]?.name} x{eff.stacks}
                       </li>
                     ))}
                   </ul>

src/components/game/crafting/EnchantmentDesigner.tsx

@@ -6,7 +6,6 @@ import { Separator } from '@/components/ui/separator';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import { ENCHANTMENT_EFFECTS } from '@/lib/game/data/enchantment-effects';
 import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress } from '@/lib/game/types';
-import { type GameStore } from '@/lib/game/store';
 import type { EnchantmentDesignerProps } from './EnchantmentDesigner/types';
 import { EquipmentTypeSelector } from './EnchantmentDesigner/EquipmentTypeSelector';
 import { EffectSelector } from './EnchantmentDesigner/EffectSelector';
@@ -23,9 +22,9 @@ import {
   addEffectToDesign,
   removeEffectFromDesign,
 } from './EnchantmentDesigner/utils';
+import { useGameStore } from '@/lib/game/stores';
 
 export function EnchantmentDesigner({
-  store,
   selectedEquipmentType,
   setSelectedEquipmentType,
   selectedEffects,
@@ -35,13 +34,13 @@ export function EnchantmentDesigner({
   selectedDesign,
   setSelectedDesign,
 }: EnchantmentDesignerProps) {
-  const enchantmentDesigns = store.enchantmentDesigns;
-  const designProgress = store.designProgress;
-  const startDesigningEnchantment = store.startDesigningEnchantment;
-  const cancelDesign = store.cancelDesign;
-  const deleteDesign = store.deleteDesign;
-  const unlockedEffects = store.unlockedEffects;
-  const skills = store.skills;
+  const enchantmentDesigns = useGameStore((s) => s.enchantmentDesigns);
+  const designProgress = useGameStore((s) => s.designProgress);
+  const startDesigningEnchantment = useGameStore((s) => s.startDesigningEnchantment);
+  const cancelDesign = useGameStore((s) => s.cancelDesign);
+  const deleteDesign = useGameStore((s) => s.deleteDesign);
+  const unlockedEffects = useGameStore((s) => s.unlockedEffects);
+  const skills = useGameStore((s) => s.skills);
 
   const enchantingLevel = skills.enchanting || 0;
   const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
@@ -51,7 +50,6 @@ export function EnchantmentDesigner({
 
   // Get capacity limit for selected equipment type
   const selectedEquipmentCapacity = getEquipmentCapacity(selectedEquipmentType);
-  const isOverCapacity = selectedEquipmentType ? designCapacityCost > selectedEquipmentCapacity : false;
 
   // Calculate design time
   const designTime = calculateDesignTime(selectedEffects);
@@ -86,7 +84,7 @@ export function EnchantmentDesigner({
   const incompatibleEffects = getIncompatibleEffects(selectedEquipmentType, unlockedEffects);
 
   // Get equipment types that the player actually owns (has instances of)
-  const ownedEquipmentTypes = getOwnedEquipmentTypes(store);
+  const ownedEquipmentTypes = getOwnedEquipmentTypes(useGameStore.getState());
 
   // Get the reason why an effect is incompatible
   const getIncompatibilityReasonWrapper = (effect: { id: string; name: string; description: string; allowedEquipmentCategories: any[] }) => {
@@ -131,7 +129,7 @@ export function EnchantmentDesigner({
               selectedEffects={selectedEffects}
               designCapacityCost={designCapacityCost}
               selectedEquipmentCapacity={selectedEquipmentCapacity}
-              isOverCapacity={isOverCapacity}
+              isOverCapacity={designCapacityCost > selectedEquipmentCapacity}
               designTime={designTime}
               selectedEquipmentType={selectedEquipmentType}
               handleCreateDesign={handleCreateDesign}

src/components/game/crafting/EnchantmentPreparer.tsx

@@ -12,28 +12,27 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 import { Trash2, CheckCircle, AlertTriangle } from 'lucide-react';
 import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
 import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress, EquipmentSlot } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
+import { fmt } from '@/lib/game/stores';
+import { useGameStore } from '@/lib/game/stores';
 import { useGameToast } from '@/components/game/GameToast';
 
 export interface EnchantmentPreparerProps {
-  store: GameStore;
   selectedEquipmentInstance: string | null;
   setSelectedEquipmentInstance: (id: string | null) => void;
 }
 
 export function EnchantmentPreparer({
-  store,
   selectedEquipmentInstance,
   setSelectedEquipmentInstance,
 }: EnchantmentPreparerProps) {
   const showToast = useGameToast();
-  const equippedInstances = store.equippedInstances;
-  const equipmentInstances = store.equipmentInstances;
-  const preparationProgress = store.preparationProgress;
-  const rawMana = store.rawMana;
-  const skills = store.skills;
-  const startPreparing = store.startPreparing;
-  const cancelPreparation = store.cancelPreparation;
+  const equippedInstances = useGameStore((s) => s.equippedInstances);
+  const equipmentInstances = useGameStore((s) => s.equipmentInstances);
+  const preparationProgress = useGameStore((s) => s.preparationProgress);
+  const rawMana = useGameStore((s) => s.rawMana);
+  const skills = useGameStore((s) => s.skills);
+  const startPreparing = useGameStore((s) => s.startPreparing);
+  const cancelPreparation = useGameStore((s) => s.cancelPreparation);
 
   // Get equipped items as array
   const equippedItems = Object.entries(equippedInstances)

src/components/game/crafting/EquipmentCrafter.tsx

@@ -10,20 +10,17 @@ import { Package, Sparkles, Trash2, Anvil } from 'lucide-react';
 import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
 import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
 import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
-import { fmt, type GameStore } from '@/lib/game/store';
+import { fmt } from '@/lib/game/stores';
+import { useGameStore } from '@/lib/game/stores';
 
-export interface EquipmentCrafterProps {
-  store: GameStore;
-}
-
-export function EquipmentCrafter({ store }: EquipmentCrafterProps) {
-  const lootInventory = store.lootInventory;
-  const equipmentCraftingProgress = store.equipmentCraftingProgress;
-  const rawMana = store.rawMana;
-  const currentAction = store.currentAction;
-  const startCraftingEquipment = store.startCraftingEquipment;
-  const cancelEquipmentCrafting = store.cancelEquipmentCrafting;
-  const deleteMaterial = store.deleteMaterial;
+export function EquipmentCrafter() {
+  const lootInventory = useGameStore((s) => s.lootInventory);
+  const equipmentCraftingProgress = useGameStore((s) => s.equipmentCraftingProgress);
+  const rawMana = useGameStore((s) => s.rawMana);
+  const currentAction = useGameStore((s) => s.currentAction);
+  const startCraftingEquipment = useGameStore((s) => s.startCraftingEquipment);
+  const cancelEquipmentCrafting = useGameStore((s) => s.cancelEquipmentCrafting);
+  const deleteMaterial = useGameStore((s) => s.deleteMaterial);
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">