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

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}