fix: fabricator recipes now use correct elemental mana type

- fabricator-recipes.ts: add optional manaType param to canCraftRecipe for clarity
- FabricatorSubTab.tsx: read elemental mana from store based on recipe manaType instead of always using rawMana
- craftingStore.ts: add startFabricatorCrafting action that deducts correct mana type
- craftingStore.types.ts: add startFabricatorCrafting to CraftingActions interface
- crafting-fabricator.ts: new helper file to keep craftingStore.ts under 400 lines

Fixes #155

src/components/game/tabs/CraftingTab/FabricatorSubTab.tsx

@@ -27,20 +27,27 @@ const MANA_TYPE_LABELS: Record<string, string> = {
 function RecipeCard({
   recipe,
   materials,
-  manaAmount,
+  rawMana,
+  elementalMana,
   onCraft,
   isCrafting,
 }: {
   recipe: FabricatorRecipe;
   materials: Record<string, number>;
-  manaAmount: number;
+  rawMana: number;
+  elementalMana: Record<string, { current: number; max: number; unlocked: boolean }>;
   onCraft: (recipe: FabricatorRecipe) => void;
   isCrafting: boolean;
 }) {
+  // Determine the correct mana amount based on the recipe's mana type
+  const pool = recipe.manaType === 'raw'
+    ? rawMana
+    : (elementalMana[recipe.manaType]?.current ?? 0);
   const { canCraft } = canCraftRecipe(
     recipe,
     materials,
-    manaAmount,
+    pool,
+    recipe.manaType,
   );
   const rarityStyle = LOOT_RARITY_COLORS[recipe.rarity];
 
@@ -85,8 +92,8 @@ function RecipeCard({
 
         <div className="flex justify-between mt-2">
           <span>{MANA_TYPE_LABELS[recipe.manaType]?.split(' ')[1] ?? recipe.manaType} Mana:</span>
-          <span className={manaAmount >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
-            {manaAmount} / {recipe.manaCost}
+          <span className={pool >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
+            {pool} / {recipe.manaCost}
           </span>
         </div>
 
@@ -114,7 +121,8 @@ export function FabricatorSubTab() {
   const lootInventory = useCraftingStore((s) => s.lootInventory);
   const equipmentCraftingProgress = useCraftingStore((s) => s.equipmentCraftingProgress);
   const rawMana = useManaStore((s) => s.rawMana);
-  const startCraftingEquipment = useCraftingStore((s) => s.startCraftingEquipment);
+  const elements = useManaStore((s) => s.elements);
+  const startFabricatorCrafting = useCraftingStore((s) => s.startFabricatorCrafting);
   const cancelEquipmentCrafting = useCraftingStore((s) => s.cancelEquipmentCrafting);
 
   const availableManaTypes = useMemo(() => {
@@ -129,8 +137,7 @@ export function FabricatorSubTab() {
   const isCrafting = equipmentCraftingProgress !== null;
 
   const handleCraft = (recipe: FabricatorRecipe) => {
-    // Use the existing equipment crafting system with a fabricator-specific blueprint ID
-    startCraftingEquipment(`fabricator-${recipe.id}`);
+    startFabricatorCrafting(recipe.id);
   };
 
   return (
@@ -197,7 +204,8 @@ export function FabricatorSubTab() {
                         key={recipe.id}
                         recipe={recipe}
                         materials={lootInventory.materials}
-                        manaAmount={rawMana}
+                        rawMana={rawMana}
+                        elementalMana={elements}
                         onCraft={handleCraft}
                         isCrafting={isCrafting}
                       />