fix: issues #221 #217 #225 #227 #224 #226 - crafting refunds, mana tracking, cancel slot, multi-element guardians, spell kill advance

src/components/game/ActionButtons.tsx

@@ -12,7 +12,7 @@ interface ActionButtonsProps {
   preparationProgress: { progress: number; required: number } | null;
   applicationProgress: { progress: number; required: number } | null;
   equipmentCraftingProgress: { progress: number; required: number } | null;
-}
+  cancelDesign?: (slot: 1 | 2) => void;
 
 // Map action IDs to labels and icons
 const ACTION_CONFIG: Record<string, { label: string; icon: typeof Sparkles; color: string }> = {
@@ -50,6 +50,7 @@ export function ActionButtons({
   preparationProgress,
   applicationProgress,
   equipmentCraftingProgress,
+  cancelDesign,
 }: ActionButtonsProps) {
   const config = ACTION_CONFIG[currentAction] || { label: currentAction, icon: Sparkles, color: 'text-gray-400' };
   const Icon = config.icon;
@@ -135,12 +136,22 @@ export function ActionButtons({
           {/* Show second design slot if active */}
           {designProgress2 && (
             <div className="mt-2 pt-2 border-t border-gray-700">
-              <div className="flex items-center gap-2">
-                <Target className="w-3 h-3 text-purple-400" />
-                <span className="text-xs text-gray-400">Second Design Slot</span>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Target className="w-3 h-3 text-purple-400" />
+                  <span className="text-xs text-gray-400">Second Design Slot</span>
+                </div>
+                {cancelDesign && (
+                  <button
+                    onClick={() => cancelDesign(2)}
+                    className="text-xs text-red-400 hover:text-red-300 cursor-pointer"
+                  >
+                    Cancel
+                  </button>
+                )}
               </div>
-              <ProgressBar 
-                progress={designProgress2.progress} 
+              <ProgressBar
+                progress={designProgress2.progress}
                 required={designProgress2.required}
                 label="Design progress"
               />

src/components/game/crafting/EnchantmentDesigner/EquipmentTypeSelector.tsx

@@ -31,7 +31,7 @@ export function EquipmentTypeSelector({
           />
           <div className="flex justify-between text-xs text-[var(--text-muted)]">
             <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
-            <ActionButton size="sm" variant="ghost" onClick={cancelDesign}>Cancel</ActionButton>
+            <ActionButton size="sm" variant="ghost" onClick={() => cancelDesign(1)}>Cancel</ActionButton>
           </div>
         </div>
       ) : (