Phase 3: Split utils.ts by responsibility

docs/phase3-progress.md

@@ -0,0 +1,50 @@
+# Phase 3: Refactor Large Files - Progress
+
+## Completed Refactorings (All Committed & Pushed)
+
+### 1. `types.ts` (516 lines) ✅
+- **Commit**: `eb81ccb Phase 3: Split types.ts into domain-specific files`
+- **Result**: Split into `types/elements.ts`, `types/attunements.ts`, `types/spells.ts`, `types/skills.ts`, `types/equipment.ts`, `types/game.ts`, `types/index.ts`
+- **Build**: ✅ Passes
+
+### 2. `constants.ts` (1436 lines) ✅
+- **Commit**: `f8520e1 Phase 3: Split constants.ts into domain-specific files`
+- **Result**: Split into `constants/elements.ts`, `constants/guardians.ts`, `constants/spells.ts`, `constants/skills.ts`, `constants/prestige.ts`, `constants/rooms.ts`, `constants/core.ts`, `constants/index.ts`
+- **Build**: ✅ Passes
+
+### 3. `enchantment-effects.ts` (846 lines) ✅
+- **Commit**: `c46981d Phase 3: Split enchantment-effects.ts into category files`
+- **Result**: Split into `data/enchantments/spell-effects.ts`, `mana-effects.ts`, `combat-effects.ts`, `elemental-effects.ts`, `defense-effects.ts`, `utility-effects.ts`, `special-effects.ts`, `enchantment-types.ts`, `index.ts`
+- **Build**: ✅ Passes
+
+## Failed Refactorings
+
+### 1. `store.ts` (2464 lines) ❌
+- **Issue**: Sub-agent made changes that broke build (`Cannot read properties of undefined (reading 'mainHand')`)
+- **Action**: Reverted changes with `git restore .`
+- **Status**: Flagged as "too large for current sub-agent setup"
+
+### 2. `skill-evolution.ts` (2312 lines) ❌
+- **Issue**: Larger than `store.ts` which failed
+- **Status**: Flagged as "too large for current sub-agent setup"
+
+## Next Files to Refactor
+
+### High Priority (Smaller, Likely to Work)
+1. `src/components/game/tabs/CraftingTab.tsx` (965 lines) - Split by crafting stage
+2. `src/lib/game/computed-stats.ts` (492 lines) - Split by responsibility
+3. `src/lib/game/utils.ts` (372 lines) - Split by responsibility
+
+### Medium Priority
+4. `src/components/game/tabs/DebugTab.tsx` (700 lines) - Split by functional area
+5. `src/lib/game/stores/gameStore.ts` (509 lines) - Clean up coordinator
+6. `src/app/page.tsx` (465 lines) - Lazy load tabs
+
+## Build Status
+✅ Build passes after each successful refactoring
+✅ All commits pushed to remote
+
+## Notes
+- Sub-agents work best with files under ~1500 lines
+- Focused prompts yield better results
+- Larger files (2000+ lines) tend to break builds or fail silently

src/components/game/crafting/EnchantmentApplier.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+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 } from '@/lib/game/types';
+import { fmt, type GameStore } from '@/lib/game/store';
+
+// Slot display names
+const SLOT_NAMES: Record<EquipmentSlot, string> = {
+  mainHand: 'Main Hand',
+  offHand: 'Off Hand',
+  head: 'Head',
+  body: 'Body',
+  hands: 'Hands',
+  feet: 'Feet',
+  accessory1: 'Accessory 1',
+  accessory2: 'Accessory 2',
+};
+
+export interface EnchantmentApplierProps {
+  store: GameStore;
+  selectedEquipmentInstance: string | null;
+  setSelectedEquipmentInstance: (id: string | null) => void;
+  selectedDesign: string | null;
+  setSelectedDesign: (id: string | null) => void;
+}
+
+export function EnchantmentApplier({
+  store,
+  selectedEquipmentInstance,
+  setSelectedEquipmentInstance,
+  selectedDesign,
+  setSelectedDesign,
+}: 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;
+
+  // Get equipped items as array
+  const equippedItems = Object.entries(equippedInstances)
+    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
+    .map(([slot, instanceId]) => ({
+      slot: slot as EquipmentSlot,
+      instance: equipmentInstances[instanceId!],
+    }));
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Equipment & Design Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Select Equipment & Design</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {applicationProgress ? (
+            <div className="space-y-3">
+              <div className="text-sm text-gray-400">
+                Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
+              </div>
+              <Progress value={(applicationProgress.progress / applicationProgress.required) * 100} className="h-3" />
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
+                <span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
+              </div>
+              <div className="flex gap-2">
+                {applicationProgress.paused ? (
+                  <Button size="sm" onClick={resumeApplication}>Resume</Button>
+                ) : (
+                  <Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
+                )}
+                <Button size="sm" variant="outline" onClick={cancelApplication}>Cancel</Button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <div>
+                <div className="text-sm text-gray-400 mb-2">Equipment (without enchantments):</div>
+                <ScrollArea className="h-32">
+                  <div className="space-y-1">
+                    {equippedItems
+                      .filter(({ instance }) => instance.enchantments.length === 0)
+                      .map(({ slot, instance }) => (
+                      <div
+                        key={instance.instanceId}
+                        className={`p-2 rounded border cursor-pointer text-sm ${
+                          selectedEquipmentInstance === instance.instanceId
+                            ? 'border-amber-500 bg-amber-900/20'
+                            : 'border-gray-700 bg-gray-800/50'
+                        }`}
+                        onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
+                      >
+                        {instance.name} ({instance.usedCapacity}/{instance.totalCapacity} cap)
+                      </div>
+                    ))}
+                    {equippedItems.filter(({ instance }) => instance.enchantments.length === 0).length === 0 && (
+                      <div className="text-center text-gray-500 text-xs py-2">
+                        No unenchanted equipment available. Disenchant in Prepare stage first.
+                      </div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </div>
+
+              <div>
+                <div className="text-sm text-gray-400 mb-2">Design:</div>
+                <ScrollArea className="h-32">
+                  <div className="space-y-1">
+                    {enchantmentDesigns.map(design => (
+                      <div
+                        key={design.id}
+                        className={`p-2 rounded border cursor-pointer text-sm ${
+                          selectedDesign === design.id
+                            ? 'border-purple-500 bg-purple-900/20'
+                            : 'border-gray-700 bg-gray-800/50'
+                        }`}
+                        onClick={() => setSelectedDesign(design.id)}
+                      >
+                        {design.name} ({design.totalCapacityUsed} cap)
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Application Details */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Apply Enchantment</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!selectedEquipmentInstance || !selectedDesign ? (
+            <div className="text-center text-gray-400 py-8">
+              Select equipment and a design
+            </div>
+          ) : applicationProgress ? (
+            <div className="text-gray-400">Application in progress...</div>
+          ) : (
+            (() => {
+              const instance = equipmentInstances[selectedEquipmentInstance];
+              const design = enchantmentDesigns.find(d => d.id === selectedDesign);
+              if (!design) return null;
+
+              const availableCap = instance.totalCapacity - instance.usedCapacity;
+              const canFit = availableCap >= design.totalCapacityUsed;
+              const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
+              const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
+
+              return (
+                <div className="space-y-4">
+                  <div className="text-lg font-semibold">{design.name}</div>
+                  <div className="text-sm text-gray-400">→ {instance.name}</div>
+                  <Separator className="bg-gray-700" />
+
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Required Capacity:</span>
+                      <span className={canFit ? 'text-green-400' : 'text-red-400'}>
+                        {design.totalCapacityUsed} / {availableCap} available
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Application Time:</span>
+                      <span>{applicationTime}h</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-400">Mana per Hour:</span>
+                      <span>{manaPerHour}</span>
+                    </div>
+                  </div>
+
+                  <div className="text-sm text-gray-400">
+                    Effects:
+                    <ul className="list-disc list-inside">
+                      {design.effects.map(eff => (
+                        <li key={eff.effectId}>
+                          {ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+
+                  <Button
+                    className="w-full"
+                    disabled={!canFit}
+                    onClick={() => startApplying(selectedEquipmentInstance, selectedDesign)}
+                  >
+                    Apply Enchantment
+                  </Button>
+                </div>
+              );
+            })()
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/game/crafting/EnchantmentDesigner.tsx

@@ -0,0 +1,356 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Wand2, Scroll, Trash2, Plus, Minus } from 'lucide-react';
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
+import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
+import type { EquipmentInstance, EnchantmentDesign, DesignEffect, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
+import { fmt, type GameStore } from '@/lib/game/store';
+
+// Slot display names
+const SLOT_NAMES: Record<EquipmentSlot, string> = {
+  mainHand: 'Main Hand',
+  offHand: 'Off Hand',
+  head: 'Head',
+  body: 'Body',
+  hands: 'Hands',
+  feet: 'Feet',
+  accessory1: 'Accessory 1',
+  accessory2: 'Accessory 2',
+};
+
+export interface EnchantmentDesignerProps {
+  store: GameStore;
+  selectedEquipmentType: string | null;
+  setSelectedEquipmentType: (type: string | null) => void;
+  selectedEffects: DesignEffect[];
+  setSelectedEffects: (effects: DesignEffect[]) => void;
+  designName: string;
+  setDesignName: (name: string) => void;
+  selectedDesign: string | null;
+  setSelectedDesign: (id: string | null) => void;
+}
+
+export function EnchantmentDesigner({
+  store,
+  selectedEquipmentType,
+  setSelectedEquipmentType,
+  selectedEffects,
+  setSelectedEffects,
+  designName,
+  setDesignName,
+  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 enchantingLevel = skills.enchanting || 0;
+  const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
+
+  // Calculate total capacity cost for current design
+  const designCapacityCost = selectedEffects.reduce(
+    (total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
+    0
+  );
+
+  // Get capacity limit for selected equipment type
+  const selectedEquipmentCapacity = selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
+  const isOverCapacity = selectedEquipmentType ? designCapacityCost > selectedEquipmentCapacity : false;
+
+  // Calculate design time
+  const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
+
+  // Add effect to design
+  const addEffect = (effectId: string) => {
+    const existing = selectedEffects.find(e => e.effectId === effectId);
+    const effectDef = ENCHANTMENT_EFFECTS[effectId];
+    if (!effectDef) return;
+
+    if (existing) {
+      if (existing.stacks < effectDef.maxStacks) {
+        setSelectedEffects(selectedEffects.map(e =>
+          e.effectId === effectId
+            ? { ...e, stacks: e.stacks + 1 }
+            : e
+        ));
+      }
+    } else {
+      setSelectedEffects([...selectedEffects, {
+        effectId,
+        stacks: 1,
+        capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
+      }]);
+    }
+  };
+
+  // Remove effect from design
+  const removeEffect = (effectId: string) => {
+    const existing = selectedEffects.find(e => e.effectId === effectId);
+    if (!existing) return;
+
+    if (existing.stacks > 1) {
+      setSelectedEffects(selectedEffects.map(e =>
+        e.effectId === effectId
+          ? { ...e, stacks: e.stacks - 1 }
+          : e
+      ));
+    } else {
+      setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
+    }
+  };
+
+  // Create design
+  const handleCreateDesign = () => {
+    if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
+
+    const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
+    if (success) {
+      // Reset form
+      setDesignName('');
+      setSelectedEquipmentType(null);
+      setSelectedEffects([]);
+    }
+  };
+
+  // Get available effects for selected equipment type (only unlocked ones)
+  const getAvailableEffects = () => {
+    if (!selectedEquipmentType) return [];
+    const type = EQUIPMENT_TYPES[selectedEquipmentType];
+    if (!type) return [];
+
+    return Object.values(ENCHANTMENT_EFFECTS).filter(
+      effect =>
+        effect.allowedEquipmentCategories.includes(type.category) &&
+        unlockedEffects.includes(effect.id)
+    );
+  };
+
+  // Render design stage
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Equipment Type Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">1. Select Equipment Type</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {designProgress ? (
+            <div className="space-y-3">
+              <div className="text-sm text-gray-400">
+                Designing for: {EQUIPMENT_TYPES[designProgress.equipmentType]?.name}
+              </div>
+              <div className="text-sm font-semibold text-amber-300">{designProgress.name}</div>
+              <Progress value={(designProgress.progress / designProgress.required) * 100} className="h-3" />
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
+                <Button size="sm" variant="outline" onClick={cancelDesign}>Cancel</Button>
+              </div>
+            </div>
+          ) : (
+            <ScrollArea className="h-64">
+              <div className="grid grid-cols-2 gap-2">
+                {Object.values(EQUIPMENT_TYPES).map(type => (
+                  <div
+                    key={type.id}
+                    className={`p-2 rounded border cursor-pointer transition-all ${
+                      selectedEquipmentType === type.id
+                        ? 'border-amber-500 bg-amber-900/20'
+                        : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
+                    }`}
+                    onClick={() => setSelectedEquipmentType(type.id)}
+                  >
+                    <div className="text-sm font-semibold">{type.name}</div>
+                    <div className="text-xs text-gray-400">Cap: {type.baseCapacity}</div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Effect Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">2. Select Effects</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {enchantingLevel < 1 ? (
+            <div className="text-center text-gray-400 py-8">
+              <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50" />
+              <p>Learn Enchanting skill to design enchantments</p>
+            </div>
+          ) : designProgress ? (
+            <div className="space-y-2">
+              <div className="text-sm text-gray-400">Design in progress...</div>
+              {designProgress.effects.map(eff => {
+                const def = ENCHANTMENT_EFFECTS[eff.effectId];
+                return (
+                  <div key={eff.effectId} className="flex justify-between text-sm">
+                    <span>{def?.name} x{eff.stacks}</span>
+                    <span className="text-gray-400">{eff.capacityCost} cap</span>
+                  </div>
+                );
+              })}
+            </div>
+          ) : !selectedEquipmentType ? (
+            <div className="text-center text-gray-400 py-8">
+              Select an equipment type first
+            </div>
+          ) : (
+            <>
+              <ScrollArea className="h-48 mb-4">
+                <div className="space-y-2">
+                  {getAvailableEffects().map(effect => {
+                    const selected = selectedEffects.find(e => e.effectId === effect.id);
+                    const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
+
+                    return (
+                      <div
+                        key={effect.id}
+                        className={`p-2 rounded border transition-all ${
+                          selected
+                            ? 'border-purple-500 bg-purple-900/20'
+                            : 'border-gray-700 bg-gray-800/50'
+                        }`}
+                      >
+                        <div className="flex justify-between items-start">
+                          <div className="flex-1">
+                            <div className="text-sm font-semibold">{effect.name}</div>
+                            <div className="text-xs text-gray-400">{effect.description}</div>
+                            <div className="text-xs text-gray-500 mt-1">
+                              Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
+                            </div>
+                          </div>
+                          <div className="flex gap-1">
+                            {selected && (
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                className="h-6 w-6 p-0"
+                                onClick={() => removeEffect(effect.id)}
+                              >
+                                <Minus className="w-3 h-3" />
+                              </Button>
+                            )}
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              className="h-6 w-6 p-0"
+                              onClick={() => addEffect(effect.id)}
+                              disabled={!selected && selectedEffects.length >= 5}
+                            >
+                              <Plus className="w-3 h-3" />
+                            </Button>
+                          </div>
+                        </div>
+                        {selected && (
+                          <Badge variant="outline" className="mt-1 text-xs">
+                            {selected.stacks}/{effect.maxStacks}
+                          </Badge>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </ScrollArea>
+
+              {/* Selected effects summary */}
+              <Separator className="bg-gray-700 my-2" />
+              <div className="space-y-2">
+                <input
+                  type="text"
+                  placeholder="Design name..."
+                  value={designName}
+                  onChange={(e) => setDesignName(e.target.value)}
+                  className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
+                />
+                <div className="flex justify-between text-sm">
+                  <span>Total Capacity:</span>
+                  <span className={isOverCapacity ? 'text-red-400' : 'text-green-400'}>
+                    {designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
+                  </span>
+                </div>
+                <div className="flex justify-between text-sm text-gray-400">
+                  <span>Design Time:</span>
+                  <span>{designTime.toFixed(1)}h</span>
+                </div>
+                <Button
+                  className="w-full"
+                  disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
+                  onClick={handleCreateDesign}
+                >
+                  {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
+                </Button>
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Saved Designs */}
+      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Saved Designs ({enchantmentDesigns.length})</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {enchantmentDesigns.length === 0 ? (
+            <div className="text-center text-gray-400 py-4">
+              No saved designs yet
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              {enchantmentDesigns.map(design => (
+                <div
+                  key={design.id}
+                  className={`p-3 rounded border ${
+                    selectedDesign === design.id
+                      ? 'border-amber-500 bg-amber-900/20'
+                      : 'border-gray-700 bg-gray-800/50'
+                  }`}
+                  onClick={() => setSelectedDesign(design.id)}
+                >
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <div className="font-semibold">{design.name}</div>
+                      <div className="text-xs text-gray-400">
+                        {EQUIPMENT_TYPES[design.equipmentType]?.name}
+                      </div>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-6 w-6 p-0 text-gray-400 hover:text-red-400"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        deleteDesign(design.id);
+                      }}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                  <div className="mt-2 text-xs text-gray-400">
+                    {design.effects.length} effects | {design.totalCapacityUsed} cap
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/game/crafting/EnchantmentPreparer.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Trash2 } from 'lucide-react';
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import type { EquipmentInstance, AppliedEnchantment, LootInventory, EquipmentCraftingProgress } from '@/lib/game/types';
+import { fmt, type GameStore } from '@/lib/game/store';
+
+// Slot display names
+const SLOT_NAMES: Record<EquipmentSlot, string> = {
+  mainHand: 'Main Hand',
+  offHand: 'Off Hand',
+  head: 'Head',
+  body: 'Body',
+  hands: 'Hands',
+  feet: 'Feet',
+  accessory1: 'Accessory 1',
+  accessory2: 'Accessory 2',
+};
+
+export interface EnchantmentPreparerProps {
+  store: GameStore;
+  selectedEquipmentInstance: string | null;
+  setSelectedEquipmentInstance: (id: string | null) => void;
+}
+
+export function EnchantmentPreparer({
+  store,
+  selectedEquipmentInstance,
+  setSelectedEquipmentInstance,
+}: EnchantmentPreparerProps) {
+  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 disenchantEquipment = store.disenchantEquipment;
+
+  // Get equipped items as array
+  const equippedItems = Object.entries(equippedInstances)
+    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
+    .map(([slot, instanceId]) => ({
+      slot: slot as EquipmentSlot,
+      instance: equipmentInstances[instanceId!],
+    }));
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Equipment Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Select Equipment to Prepare or Disenchant</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {preparationProgress ? (
+            <div className="space-y-3">
+              <div className="text-sm text-gray-400">
+                Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
+              </div>
+              <Progress value={(preparationProgress.progress / preparationProgress.required) * 100} className="h-3" />
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
+                <span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
+              </div>
+              <Button size="sm" variant="outline" onClick={cancelPreparation}>Cancel</Button>
+            </div>
+          ) : (
+            <ScrollArea className="h-64">
+              <div className="space-y-2">
+                {equippedItems.map(({ slot, instance }) => {
+                  const hasEnchantments = instance.enchantments.length > 0;
+                  return (
+                    <div
+                      key={instance.instanceId}
+                      className={`p-3 rounded border cursor-pointer transition-all ${
+                        selectedEquipmentInstance === instance.instanceId
+                          ? 'border-amber-500 bg-amber-900/20'
+                          : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
+                      } ${hasEnchantments ? 'border-l-4 border-l-red-600' : ''}`}
+                      onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
+                    >
+                      <div className="flex justify-between">
+                        <div>
+                          <div className="font-semibold">{instance.name}</div>
+                          <div className="text-xs text-gray-400">{SLOT_NAMES[slot]}</div>
+                          {hasEnchantments && (
+                            <div className="text-xs text-red-400 mt-1">
+                              ⚠️ {instance.enchantments.length} enchantments - Disenchant to apply new
+                            </div>
+                          )}
+                        </div>
+                        <div className="text-right text-sm">
+                          <div className="text-green-400">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
+                          <div className="text-xs text-gray-400">{instance.enchantments.length} enchants</div>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+                {equippedItems.length === 0 && (
+                  <div className="text-center text-gray-400 py-4">No equipped items</div>
+                )}
+              </div>
+            </ScrollArea>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Preparation Details */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm">Preparation Details</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {!selectedEquipmentInstance ? (
+            <div className="text-center text-gray-400 py-8">
+              Select equipment to prepare or disenchant
+            </div>
+          ) : preparationProgress ? (
+            <div className="text-gray-400">Preparation in progress...</div>
+          ) : (
+            (() => {
+              const instance = equipmentInstances[selectedEquipmentInstance];
+              const hasEnchantments = instance.enchantments.length > 0;
+              const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
+              const manaCost = instance.totalCapacity * 10;
+
+              // Calculate disenchant recovery
+              const disenchantLevel = skills.disenchanting || 0;
+              const recoveryRate = 0.1 + disenchantLevel * 0.2;
+              const totalRecoverable = instance.enchantments.reduce(
+                (sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
+                0
+              );
+
+              return (
+                <div className="space-y-4">
+                  <div className="text-lg font-semibold">{instance.name}</div>
+                  <Separator className="bg-gray-700" />
+
+                  {/* Disenchant option for enchanted gear */}
+                  {hasEnchantments && (
+                    <div className="p-3 rounded border border-red-600/50 bg-red-900/20 space-y-3">
+                      <div className="text-sm font-semibold text-red-400">⚠️ Equipment has enchantments</div>
+                      <div className="text-xs text-gray-400">
+                        You must disenchant before applying new enchantments.
+                      </div>
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-400">Recoverable Mana:</span>
+                        <span className="text-green-400">{fmt(totalRecoverable)}</span>
+                      </div>
+                      <Button
+                        className="w-full bg-red-600 hover:bg-red-700"
+                        onClick={() => disenchantEquipment(instance.instanceId)}
+                      >
+                        <Trash2 className="w-4 h-4 mr-2" />
+                        Disenchant & Recover {fmt(totalRecoverable)} Mana
+                      </Button>
+                    </div>
+                  )}
+
+                  {/* Prepare option for non-enchanted gear */}
+                  {!hasEnchantments && (
+                    <>
+                      <div className="space-y-2 text-sm">
+                        <div className="flex justify-between">
+                          <span className="text-gray-400">Capacity:</span>
+                          <span>{instance.usedCapacity}/{instance.totalCapacity}</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-400">Prep Time:</span>
+                          <span>{prepTime}h</span>
+                        </div>
+                        <div className="flex justify-between">
+                          <span className="text-gray-400">Mana Cost:</span>
+                          <span className={rawMana < manaCost ? 'text-red-400' : 'text-green-400'}>
+                            {fmt(manaCost)}
+                          </span>
+                        </div>
+                      </div>
+                      <Button
+                        className="w-full"
+                        disabled={rawMana < manaCost}
+                        onClick={() => startPreparing(selectedEquipmentInstance)}
+                      >
+                        Start Preparation ({prepTime}h, {fmt(manaCost)} mana)
+                      </Button>
+                    </>
+                  )}
+                </div>
+              );
+            })()
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/game/crafting/EquipmentCrafter.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Progress } from '@/components/ui/progress';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+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';
+
+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;
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+      {/* Blueprint Selection */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
+            <Anvil className="w-4 h-4" />
+            Available Blueprints
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          {equipmentCraftingProgress ? (
+            <div className="space-y-3">
+              <div className="text-sm text-gray-400">
+                Crafting: {CRAFTING_RECIPES[equipmentCraftingProgress.blueprintId]?.name}
+              </div>
+              <Progress value={(equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100} className="h-3" />
+              <div className="flex justify-between text-xs text-gray-400">
+                <span>{equipmentCraftingProgress.progress.toFixed(1)}h / {equipmentCraftingProgress.required.toFixed(1)}h</span>
+                <span>Mana spent: {fmt(equipmentCraftingProgress.manaSpent)}</span>
+              </div>
+              <Button size="sm" variant="outline" onClick={cancelEquipmentCrafting}>Cancel</Button>
+            </div>
+          ) : (
+            <ScrollArea className="h-64">
+              <div className="space-y-2">
+                {lootInventory.blueprints.length === 0 ? (
+                  <div className="text-center text-gray-400 py-4">
+                    <Package className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                    <p>No blueprints discovered yet.</p>
+                    <p className="text-xs mt-1">Defeat guardians to find blueprints!</p>
+                  </div>
+                ) : (
+                  lootInventory.blueprints.map(bpId => {
+                    const recipe = CRAFTING_RECIPES[bpId];
+                    if (!recipe) return null;
+
+                    const { canCraft, missingMaterials, missingMana } = canCraftRecipe(
+                      recipe,
+                      lootInventory.materials,
+                      rawMana
+                    );
+
+                    const rarityStyle = RARITY_COLORS[recipe.rarity];
+
+                    return (
+                      <div
+                        key={bpId}
+                        className="p-3 rounded border bg-gray-800/50"
+                        style={{ borderColor: rarityStyle?.color }}
+                      >
+                        <div className="flex justify-between items-start mb-2">
+                          <div>
+                            <div className="font-semibold" style={{ color: rarityStyle?.color }}>
+                              {recipe.name}
+                            </div>
+                            <div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
+                          </div>
+                          <Badge variant="outline" className="text-xs">
+                            {recipe.equipmentTypeId ? 'Equipment' : 'Other'}
+                          </Badge>
+                        </div>
+
+                        <div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
+
+                        <Separator className="bg-gray-700 my-2" />
+
+                        <div className="text-xs space-y-1">
+                          <div className="text-gray-500">Materials:</div>
+                          {Object.entries(recipe.materials).map(([matId, amount]) => {
+                            const available = lootInventory.materials[matId] || 0;
+                            const matDrop = LOOT_DROPS[matId];
+                            const hasEnough = available >= amount;
+
+                            return (
+                              <div key={matId} className="flex justify-between">
+                                <span>{matDrop?.name || matId}</span>
+                                <span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
+                                  {available} / {amount}
+                                </span>
+                              </div>
+                            );
+                          })}
+
+                          <div className="flex justify-between mt-2">
+                            <span>Mana Cost:</span>
+                            <span className={rawMana >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
+                              {fmt(recipe.manaCost)}
+                            </span>
+                          </div>
+
+                          <div className="flex justify-between">
+                            <span>Craft Time:</span>
+                            <span>{recipe.craftTime}h</span>
+                          </div>
+                        </div>
+
+                        <Button
+                          className="w-full mt-3"
+                          size="sm"
+                          disabled={!canCraft || currentAction === 'craft'}
+                          onClick={() => startCraftingEquipment(bpId)}
+                        >
+                          {canCraft ? 'Craft Equipment' : 'Missing Resources'}
+                        </Button>
+                      </div>
+                    );
+                  })
+                )}
+              </div>
+            </ScrollArea>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Materials Inventory */}
+      <Card className="bg-gray-900/80 border-gray-700">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
+            <Package className="w-4 h-4" />
+            Materials ({Object.values(lootInventory.materials).reduce((a, b) => a + b, 0)})
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ScrollArea className="h-64">
+            {Object.keys(lootInventory.materials).length === 0 ? (
+              <div className="text-center text-gray-400 py-4">
+                <Sparkles className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                <p>No materials collected yet.</p>
+                <p className="text-xs mt-1">Defeat floors to gather materials!</p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-2 gap-2">
+                {Object.entries(lootInventory.materials).map(([matId, count]) => {
+                  if (count <= 0) return null;
+                  const drop = LOOT_DROPS[matId];
+                  if (!drop) return null;
+
+                  const rarityStyle = RARITY_COLORS[drop.rarity];
+
+                  return (
+                    <div
+                      key={matId}
+                      className="p-2 rounded border bg-gray-800/50 group relative"
+                      style={{ borderColor: rarityStyle?.color }}
+                    >
+                      <div className="flex items-start justify-between">
+                        <div>
+                          <div className="text-sm font-semibold" style={{ color: rarityStyle?.color }}>
+                            {drop.name}
+                          </div>
+                          <div className="text-xs text-gray-400">x{count}</div>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
+                          onClick={() => deleteMaterial(matId, count)}
+                        >
+                          <Trash2 className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/game/crafting/index.tsx

@@ -0,0 +1,6 @@
+// Barrel file for crafting components
+
+export { EnchantmentDesigner, type EnchantmentDesignerProps } from './EnchantmentDesigner';
+export { EnchantmentPreparer, type EnchantmentPreparerProps } from './EnchantmentPreparer';
+export { EnchantmentApplier, type EnchantmentApplierProps } from './EnchantmentApplier';
+export { EquipmentCrafter, type EquipmentCrafterProps } from './EquipmentCrafter';

src/components/game/tabs/CraftingTab.tsx

@@ -4,65 +4,30 @@ import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { ScrollArea } from '@/components/ui/scroll-area';
-import { Separator } from '@/components/ui/separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { 
-  Wand2, Scroll, Hammer, Sparkles, Trash2, Plus, Minus, 
-  Package, Zap, Clock, ChevronRight, Circle, Anvil
-} from 'lucide-react';
-import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
-import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
-import { CRAFTING_RECIPES, canCraftRecipe } from '@/lib/game/data/crafting-recipes';
-import { LOOT_DROPS, RARITY_COLORS } from '@/lib/game/data/loot-drops';
+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';
-
-// Slot display names
-const SLOT_NAMES: Record<EquipmentSlot, string> = {
-  mainHand: 'Main Hand',
-  offHand: 'Off Hand',
-  head: 'Head',
-  body: 'Body',
-  hands: 'Hands',
-  feet: 'Feet',
-  accessory1: 'Accessory 1',
-  accessory2: 'Accessory 2',
-};
+import {
+  EnchantmentDesigner,
+  EnchantmentPreparer,
+  EnchantmentApplier,
+  EquipmentCrafter,
+} from '@/components/game/crafting';
 
 export interface CraftingTabProps {
   store: GameStore;
 }
 
 export function CraftingTab({ store }: CraftingTabProps) {
-  const equippedInstances = store.equippedInstances;
-  const equipmentInstances = store.equipmentInstances;
-  const enchantmentDesigns = store.enchantmentDesigns;
+  const currentAction = store.currentAction;
   const designProgress = store.designProgress;
   const preparationProgress = store.preparationProgress;
   const applicationProgress = store.applicationProgress;
   const equipmentCraftingProgress = store.equipmentCraftingProgress;
-  const rawMana = store.rawMana;
-  const skills = store.skills;
-  const currentAction = store.currentAction;
-  const unlockedEffects = store.unlockedEffects;
-  const lootInventory = store.lootInventory;
-  const startDesigningEnchantment = store.startDesigningEnchantment;
-  const cancelDesign = store.cancelDesign;
-  const saveDesign = store.saveDesign;
-  const deleteDesign = store.deleteDesign;
-  const startPreparing = store.startPreparing;
-  const cancelPreparation = store.cancelPreparation;
-  const startApplying = store.startApplying;
   const pauseApplication = store.pauseApplication;
   const resumeApplication = store.resumeApplication;
-  const cancelApplication = store.cancelApplication;
-  const disenchantEquipment = store.disenchantEquipment;
-  const getAvailableCapacity = store.getAvailableCapacity;
-  const startCraftingEquipment = store.startCraftingEquipment;
-  const cancelEquipmentCrafting = store.cancelEquipmentCrafting;
-  const deleteMaterial = store.deleteMaterial;
+
   const [craftingStage, setCraftingStage] = useState<'design' | 'prepare' | 'apply' | 'craft'>('craft');
   const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
   const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
@@ -72,794 +37,6 @@ export function CraftingTab({ store }: CraftingTabProps) {
   const [designName, setDesignName] = useState('');
   const [selectedEffects, setSelectedEffects] = useState<DesignEffect[]>([]);
 
-  const enchantingLevel = skills.enchanting || 0;
-  const efficiencyBonus = (skills.efficientEnchant || 0) * 0.05;
-  
-  // Get equipped items as array
-  const equippedItems = Object.entries(equippedInstances)
-    .filter(([, instanceId]) => instanceId && equipmentInstances[instanceId])
-    .map(([slot, instanceId]) => ({
-      slot: slot as EquipmentSlot,
-      instance: equipmentInstances[instanceId!],
-    }));
-  
-  // Calculate total capacity cost for current design
-  const designCapacityCost = selectedEffects.reduce(
-    (total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
-    0
-  );
-  
-  // Get capacity limit for selected equipment type
-  const selectedEquipmentCapacity = selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
-  const isOverCapacity = selectedEquipmentType ? designCapacityCost > selectedEquipmentCapacity : false;
-  
-  // Calculate design time
-  const designTime = selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
-  
-  // Add effect to design
-  const addEffect = (effectId: string) => {
-    const existing = selectedEffects.find(e => e.effectId === effectId);
-    const effectDef = ENCHANTMENT_EFFECTS[effectId];
-    if (!effectDef) return;
-    
-    if (existing) {
-      if (existing.stacks < effectDef.maxStacks) {
-        setSelectedEffects(selectedEffects.map(e => 
-          e.effectId === effectId 
-            ? { ...e, stacks: e.stacks + 1 }
-            : e
-        ));
-      }
-    } else {
-      setSelectedEffects([...selectedEffects, {
-        effectId,
-        stacks: 1,
-        capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
-      }]);
-    }
-  };
-  
-  // Remove effect from design
-  const removeEffect = (effectId: string) => {
-    const existing = selectedEffects.find(e => e.effectId === effectId);
-    if (!existing) return;
-    
-    if (existing.stacks > 1) {
-      setSelectedEffects(selectedEffects.map(e => 
-        e.effectId === effectId 
-          ? { ...e, stacks: e.stacks - 1 }
-          : e
-      ));
-    } else {
-      setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
-    }
-  };
-  
-  // Create design
-  const handleCreateDesign = () => {
-    if (!designName || !selectedEquipmentType || selectedEffects.length === 0) return;
-    
-    const success = startDesigningEnchantment(designName, selectedEquipmentType, selectedEffects);
-    if (success) {
-      // Reset form
-      setDesignName('');
-      setSelectedEquipmentType(null);
-      setSelectedEffects([]);
-    }
-  };
-  
-  // Get available effects for selected equipment type (only unlocked ones)
-  const getAvailableEffects = () => {
-    if (!selectedEquipmentType) return [];
-    const type = EQUIPMENT_TYPES[selectedEquipmentType];
-    if (!type) return [];
-    
-    return Object.values(ENCHANTMENT_EFFECTS).filter(
-      effect => 
-        effect.allowedEquipmentCategories.includes(type.category) &&
-        unlockedEffects.includes(effect.id)
-    );
-  };
-  
-  // Render design stage
-  const renderDesignStage = () => (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {/* Equipment Type Selection */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm">1. Select Equipment Type</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {designProgress ? (
-            <div className="space-y-3">
-              <div className="text-sm text-gray-400">
-                Designing for: {EQUIPMENT_TYPES[designProgress.equipmentType]?.name}
-              </div>
-              <div className="text-sm font-semibold text-amber-300">{designProgress.name}</div>
-              <Progress value={(designProgress.progress / designProgress.required) * 100} className="h-3" />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>{designProgress.progress.toFixed(1)}h / {designProgress.required.toFixed(1)}h</span>
-                <Button size="sm" variant="outline" onClick={cancelDesign}>Cancel</Button>
-              </div>
-            </div>
-          ) : (
-            <ScrollArea className="h-64">
-              <div className="grid grid-cols-2 gap-2">
-                {Object.values(EQUIPMENT_TYPES).map(type => (
-                  <div
-                    key={type.id}
-                    className={`p-2 rounded border cursor-pointer transition-all ${
-                      selectedEquipmentType === type.id
-                        ? 'border-amber-500 bg-amber-900/20'
-                        : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
-                    }`}
-                    onClick={() => setSelectedEquipmentType(type.id)}
-                  >
-                    <div className="text-sm font-semibold">{type.name}</div>
-                    <div className="text-xs text-gray-400">Cap: {type.baseCapacity}</div>
-                  </div>
-                ))}
-              </div>
-            </ScrollArea>
-          )}
-        </CardContent>
-      </Card>
-      
-      {/* Effect Selection */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm">2. Select Effects</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {enchantingLevel < 1 ? (
-            <div className="text-center text-gray-400 py-8">
-              <Wand2 className="w-12 h-12 mx-auto mb-2 opacity-50" />
-              <p>Learn Enchanting skill to design enchantments</p>
-            </div>
-          ) : designProgress ? (
-            <div className="space-y-2">
-              <div className="text-sm text-gray-400">Design in progress...</div>
-              {designProgress.effects.map(eff => {
-                const def = ENCHANTMENT_EFFECTS[eff.effectId];
-                return (
-                  <div key={eff.effectId} className="flex justify-between text-sm">
-                    <span>{def?.name} x{eff.stacks}</span>
-                    <span className="text-gray-400">{eff.capacityCost} cap</span>
-                  </div>
-                );
-              })}
-            </div>
-          ) : !selectedEquipmentType ? (
-            <div className="text-center text-gray-400 py-8">
-              Select an equipment type first
-            </div>
-          ) : (
-            <>
-              <ScrollArea className="h-48 mb-4">
-                <div className="space-y-2">
-                  {getAvailableEffects().map(effect => {
-                    const selected = selectedEffects.find(e => e.effectId === effect.id);
-                    const cost = calculateEffectCapacityCost(effect.id, (selected?.stacks || 0) + 1, efficiencyBonus);
-                    
-                    return (
-                      <div
-                        key={effect.id}
-                        className={`p-2 rounded border transition-all ${
-                          selected
-                            ? 'border-purple-500 bg-purple-900/20'
-                            : 'border-gray-700 bg-gray-800/50'
-                        }`}
-                      >
-                        <div className="flex justify-between items-start">
-                          <div className="flex-1">
-                            <div className="text-sm font-semibold">{effect.name}</div>
-                            <div className="text-xs text-gray-400">{effect.description}</div>
-                            <div className="text-xs text-gray-500 mt-1">
-                              Cost: {effect.baseCapacityCost} cap | Max: {effect.maxStacks}
-                            </div>
-                          </div>
-                          <div className="flex gap-1">
-                            {selected && (
-                              <Button
-                                size="sm"
-                                variant="outline"
-                                className="h-6 w-6 p-0"
-                                onClick={() => removeEffect(effect.id)}
-                              >
-                                <Minus className="w-3 h-3" />
-                              </Button>
-                            )}
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              className="h-6 w-6 p-0"
-                              onClick={() => addEffect(effect.id)}
-                              disabled={!selected && selectedEffects.length >= 5}
-                            >
-                              <Plus className="w-3 h-3" />
-                            </Button>
-                          </div>
-                        </div>
-                        {selected && (
-                          <Badge variant="outline" className="mt-1 text-xs">
-                            {selected.stacks}/{effect.maxStacks}
-                          </Badge>
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
-              </ScrollArea>
-              
-              {/* Selected effects summary */}
-              <Separator className="bg-gray-700 my-2" />
-              <div className="space-y-2">
-                <input
-                  type="text"
-                  placeholder="Design name..."
-                  value={designName}
-                  onChange={(e) => setDesignName(e.target.value)}
-                  className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm"
-                />
-                <div className="flex justify-between text-sm">
-                  <span>Total Capacity:</span>
-                  <span className={isOverCapacity ? 'text-red-400' : 'text-green-400'}>
-                    {designCapacityCost.toFixed(0)} / {selectedEquipmentCapacity}
-                  </span>
-                </div>
-                <div className="flex justify-between text-sm text-gray-400">
-                  <span>Design Time:</span>
-                  <span>{designTime.toFixed(1)}h</span>
-                </div>
-                <Button
-                  className="w-full"
-                  disabled={!designName || selectedEffects.length === 0 || isOverCapacity}
-                  onClick={handleCreateDesign}
-                >
-                  {isOverCapacity ? 'Over Capacity!' : `Start Design (${designTime.toFixed(1)}h)`}
-                </Button>
-              </div>
-            </>
-          )}
-        </CardContent>
-      </Card>
-      
-      {/* Saved Designs */}
-      <Card className="bg-gray-900/80 border-gray-700 lg:col-span-2">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm">Saved Designs ({enchantmentDesigns.length})</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {enchantmentDesigns.length === 0 ? (
-            <div className="text-center text-gray-400 py-4">
-              No saved designs yet
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-              {enchantmentDesigns.map(design => (
-                <div
-                  key={design.id}
-                  className={`p-3 rounded border ${
-                    selectedDesign === design.id
-                      ? 'border-amber-500 bg-amber-900/20'
-                      : 'border-gray-700 bg-gray-800/50'
-                  }`}
-                  onClick={() => setSelectedDesign(design.id)}
-                >
-                  <div className="flex justify-between items-start">
-                    <div>
-                      <div className="font-semibold">{design.name}</div>
-                      <div className="text-xs text-gray-400">
-                        {EQUIPMENT_TYPES[design.equipmentType]?.name}
-                      </div>
-                    </div>
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-6 w-6 p-0 text-gray-400 hover:text-red-400"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        deleteDesign(design.id);
-                      }}
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </Button>
-                  </div>
-                  <div className="mt-2 text-xs text-gray-400">
-                    {design.effects.length} effects | {design.totalCapacityUsed} cap
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-  
-  // Render prepare stage
-  const renderPrepareStage = () => (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {/* Equipment Selection */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm">Select Equipment to Prepare or Disenchant</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {preparationProgress ? (
-            <div className="space-y-3">
-              <div className="text-sm text-gray-400">
-                Preparing: {equipmentInstances[preparationProgress.equipmentInstanceId]?.name}
-              </div>
-              <Progress value={(preparationProgress.progress / preparationProgress.required) * 100} className="h-3" />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>{preparationProgress.progress.toFixed(1)}h / {preparationProgress.required.toFixed(1)}h</span>
-                <span>Mana paid: {fmt(preparationProgress.manaCostPaid)}</span>
-              </div>
-              <Button size="sm" variant="outline" onClick={cancelPreparation}>Cancel</Button>
-            </div>
-          ) : (
-            <ScrollArea className="h-64">
-              <div className="space-y-2">
-                {equippedItems.map(({ slot, instance }) => {
-                  const hasEnchantments = instance.enchantments.length > 0;
-                  return (
-                    <div
-                      key={instance.instanceId}
-                      className={`p-3 rounded border cursor-pointer transition-all ${
-                        selectedEquipmentInstance === instance.instanceId
-                          ? 'border-amber-500 bg-amber-900/20'
-                          : 'border-gray-700 bg-gray-800/50 hover:border-gray-600'
-                      } ${hasEnchantments ? 'border-l-4 border-l-red-600' : ''}`}
-                      onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
-                    >
-                      <div className="flex justify-between">
-                        <div>
-                          <div className="font-semibold">{instance.name}</div>
-                          <div className="text-xs text-gray-400">{SLOT_NAMES[slot]}</div>
-                          {hasEnchantments && (
-                            <div className="text-xs text-red-400 mt-1">
-                              ⚠️ {instance.enchantments.length} enchantments - Disenchant to apply new
-                            </div>
-                          )}
-                        </div>
-                        <div className="text-right text-sm">
-                          <div className="text-green-400">{instance.usedCapacity}/{instance.totalCapacity} cap</div>
-                          <div className="text-xs text-gray-400">{instance.enchantments.length} enchants</div>
-                        </div>
-                      </div>
-                    </div>
-                  );
-                })}
-                {equippedItems.length === 0 && (
-                  <div className="text-center text-gray-400 py-4">No equipped items</div>
-                )}
-              </div>
-            </ScrollArea>
-          )}
-        </CardContent>
-      </Card>
-      
-      {/* Preparation Details */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm">Preparation Details</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {!selectedEquipmentInstance ? (
-            <div className="text-center text-gray-400 py-8">
-              Select equipment to prepare or disenchant
-            </div>
-          ) : preparationProgress ? (
-            <div className="text-gray-400">Preparation in progress...</div>
-          ) : (
-            (() => {
-              const instance = equipmentInstances[selectedEquipmentInstance];
-              const hasEnchantments = instance.enchantments.length > 0;
-              const prepTime = 2 + Math.floor(instance.totalCapacity / 50);
-              const manaCost = instance.totalCapacity * 10;
-              
-              // Calculate disenchant recovery
-              const disenchantLevel = skills.disenchanting || 0;
-              const recoveryRate = 0.1 + disenchantLevel * 0.2;
-              const totalRecoverable = instance.enchantments.reduce(
-                (sum, e) => sum + Math.floor(e.actualCost * recoveryRate),
-                0
-              );
-              
-              return (
-                <div className="space-y-4">
-                  <div className="text-lg font-semibold">{instance.name}</div>
-                  <Separator className="bg-gray-700" />
-                  
-                  {/* Disenchant option for enchanted gear */}
-                  {hasEnchantments && (
-                    <div className="p-3 rounded border border-red-600/50 bg-red-900/20 space-y-3">
-                      <div className="text-sm font-semibold text-red-400">⚠️ Equipment has enchantments</div>
-                      <div className="text-xs text-gray-400">
-                        You must disenchant before applying new enchantments.
-                      </div>
-                      <div className="flex justify-between text-sm">
-                        <span className="text-gray-400">Recoverable Mana:</span>
-                        <span className="text-green-400">{fmt(totalRecoverable)}</span>
-                      </div>
-                      <Button
-                        className="w-full bg-red-600 hover:bg-red-700"
-                        onClick={() => disenchantEquipment(instance.instanceId)}
-                      >
-                        <Trash2 className="w-4 h-4 mr-2" />
-                        Disenchant & Recover {fmt(totalRecoverable)} Mana
-                      </Button>
-                    </div>
-                  )}
-                  
-                  {/* Prepare option for non-enchanted gear */}
-                  {!hasEnchantments && (
-                    <>
-                      <div className="space-y-2 text-sm">
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Capacity:</span>
-                          <span>{instance.usedCapacity}/{instance.totalCapacity}</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Prep Time:</span>
-                          <span>{prepTime}h</span>
-                        </div>
-                        <div className="flex justify-between">
-                          <span className="text-gray-400">Mana Cost:</span>
-                          <span className={rawMana < manaCost ? 'text-red-400' : 'text-green-400'}>
-                            {fmt(manaCost)}
-                          </span>
-                        </div>
-                      </div>
-                      <Button
-                        className="w-full"
-                        disabled={rawMana < manaCost}
-                        onClick={() => startPreparing(selectedEquipmentInstance)}
-                      >
-                        Start Preparation ({prepTime}h, {fmt(manaCost)} mana)
-                      </Button>
-                    </>
-                  )}
-                </div>
-              );
-            })()
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-  
-  // Render apply stage
-  const renderApplyStage = () => (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {/* Equipment & Design Selection */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm">Select Equipment & Design</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {applicationProgress ? (
-            <div className="space-y-3">
-              <div className="text-sm text-gray-400">
-                Applying to: {equipmentInstances[applicationProgress.equipmentInstanceId]?.name}
-              </div>
-              <Progress value={(applicationProgress.progress / applicationProgress.required) * 100} className="h-3" />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>{applicationProgress.progress.toFixed(1)}h / {applicationProgress.required.toFixed(1)}h</span>
-                <span>Mana spent: {fmt(applicationProgress.manaSpent)}</span>
-              </div>
-              <div className="flex gap-2">
-                {applicationProgress.paused ? (
-                  <Button size="sm" onClick={resumeApplication}>Resume</Button>
-                ) : (
-                  <Button size="sm" variant="outline" onClick={pauseApplication}>Pause</Button>
-                )}
-                <Button size="sm" variant="outline" onClick={cancelApplication}>Cancel</Button>
-              </div>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              <div>
-                <div className="text-sm text-gray-400 mb-2">Equipment (without enchantments):</div>
-                <ScrollArea className="h-32">
-                  <div className="space-y-1">
-                    {equippedItems
-                      .filter(({ instance }) => instance.enchantments.length === 0)
-                      .map(({ slot, instance }) => (
-                      <div
-                        key={instance.instanceId}
-                        className={`p-2 rounded border cursor-pointer text-sm ${
-                          selectedEquipmentInstance === instance.instanceId
-                            ? 'border-amber-500 bg-amber-900/20'
-                            : 'border-gray-700 bg-gray-800/50'
-                        }`}
-                        onClick={() => setSelectedEquipmentInstance(instance.instanceId)}
-                      >
-                        {instance.name} ({instance.usedCapacity}/{instance.totalCapacity} cap)
-                      </div>
-                    ))}
-                    {equippedItems.filter(({ instance }) => instance.enchantments.length === 0).length === 0 && (
-                      <div className="text-center text-gray-500 text-xs py-2">
-                        No unenchanted equipment available. Disenchant in Prepare stage first.
-                      </div>
-                    )}
-                  </div>
-                </ScrollArea>
-              </div>
-              
-              <div>
-                <div className="text-sm text-gray-400 mb-2">Design:</div>
-                <ScrollArea className="h-32">
-                  <div className="space-y-1">
-                    {enchantmentDesigns.map(design => (
-                      <div
-                        key={design.id}
-                        className={`p-2 rounded border cursor-pointer text-sm ${
-                          selectedDesign === design.id
-                            ? 'border-purple-500 bg-purple-900/20'
-                            : 'border-gray-700 bg-gray-800/50'
-                        }`}
-                        onClick={() => setSelectedDesign(design.id)}
-                      >
-                        {design.name} ({design.totalCapacityUsed} cap)
-                      </div>
-                    ))}
-                  </div>
-                </ScrollArea>
-              </div>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-      
-      {/* Application Details */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm">Apply Enchantment</CardTitle>
-        </CardHeader>
-        <CardContent>
-          {!selectedEquipmentInstance || !selectedDesign ? (
-            <div className="text-center text-gray-400 py-8">
-              Select equipment and a design
-            </div>
-          ) : applicationProgress ? (
-            <div className="text-gray-400">Application in progress...</div>
-          ) : (
-            (() => {
-              const instance = equipmentInstances[selectedEquipmentInstance];
-              const design = enchantmentDesigns.find(d => d.id === selectedDesign);
-              if (!design) return null;
-              
-              const availableCap = instance.totalCapacity - instance.usedCapacity;
-              const canFit = availableCap >= design.totalCapacityUsed;
-              const applicationTime = 2 + design.effects.reduce((t, e) => t + e.stacks, 0);
-              const manaPerHour = 20 + design.effects.reduce((t, e) => t + e.stacks * 5, 0);
-              
-              return (
-                <div className="space-y-4">
-                  <div className="text-lg font-semibold">{design.name}</div>
-                  <div className="text-sm text-gray-400">→ {instance.name}</div>
-                  <Separator className="bg-gray-700" />
-                  
-                  <div className="space-y-2 text-sm">
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Required Capacity:</span>
-                      <span className={canFit ? 'text-green-400' : 'text-red-400'}>
-                        {design.totalCapacityUsed} / {availableCap} available
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Application Time:</span>
-                      <span>{applicationTime}h</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-400">Mana per Hour:</span>
-                      <span>{manaPerHour}</span>
-                    </div>
-                  </div>
-                  
-                  <div className="text-sm text-gray-400">
-                    Effects:
-                    <ul className="list-disc list-inside">
-                      {design.effects.map(eff => (
-                        <li key={eff.effectId}>
-                          {ENCHANTMENT_EFFECTS[eff.effectId]?.name} x{eff.stacks}
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  
-                  <Button
-                    className="w-full"
-                    disabled={!canFit}
-                    onClick={() => startApplying(selectedEquipmentInstance, selectedDesign)}
-                  >
-                    Apply Enchantment
-                  </Button>
-                </div>
-              );
-            })()
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-  
-  // Render equipment crafting stage
-  const renderCraftStage = () => (
-    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-      {/* Blueprint Selection */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
-            <Anvil className="w-4 h-4" />
-            Available Blueprints
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          {equipmentCraftingProgress ? (
-            <div className="space-y-3">
-              <div className="text-sm text-gray-400">
-                Crafting: {CRAFTING_RECIPES[equipmentCraftingProgress.blueprintId]?.name}
-              </div>
-              <Progress value={(equipmentCraftingProgress.progress / equipmentCraftingProgress.required) * 100} className="h-3" />
-              <div className="flex justify-between text-xs text-gray-400">
-                <span>{equipmentCraftingProgress.progress.toFixed(1)}h / {equipmentCraftingProgress.required.toFixed(1)}h</span>
-                <span>Mana spent: {fmt(equipmentCraftingProgress.manaSpent)}</span>
-              </div>
-              <Button size="sm" variant="outline" onClick={cancelEquipmentCrafting}>Cancel</Button>
-            </div>
-          ) : (
-            <ScrollArea className="h-64">
-              <div className="space-y-2">
-                {lootInventory.blueprints.length === 0 ? (
-                  <div className="text-center text-gray-400 py-4">
-                    <Package className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                    <p>No blueprints discovered yet.</p>
-                    <p className="text-xs mt-1">Defeat guardians to find blueprints!</p>
-                  </div>
-                ) : (
-                  lootInventory.blueprints.map(bpId => {
-                    const recipe = CRAFTING_RECIPES[bpId];
-                    if (!recipe) return null;
-                    
-                    const { canCraft, missingMaterials, missingMana } = canCraftRecipe(
-                      recipe,
-                      lootInventory.materials,
-                      rawMana
-                    );
-                    
-                    const rarityStyle = RARITY_COLORS[recipe.rarity];
-                    
-                    return (
-                      <div
-                        key={bpId}
-                        className="p-3 rounded border bg-gray-800/50"
-                        style={{ borderColor: rarityStyle?.color }}
-                      >
-                        <div className="flex justify-between items-start mb-2">
-                          <div>
-                            <div className="font-semibold" style={{ color: rarityStyle?.color }}>
-                              {recipe.name}
-                            </div>
-                            <div className="text-xs text-gray-400 capitalize">{recipe.rarity}</div>
-                          </div>
-                          <Badge variant="outline" className="text-xs">
-                            {EQUIPMENT_TYPES[recipe.equipmentTypeId]?.category}
-                          </Badge>
-                        </div>
-                        
-                        <div className="text-xs text-gray-400 mb-2">{recipe.description}</div>
-                        
-                        <Separator className="bg-gray-700 my-2" />
-                        
-                        <div className="text-xs space-y-1">
-                          <div className="text-gray-500">Materials:</div>
-                          {Object.entries(recipe.materials).map(([matId, amount]) => {
-                            const available = lootInventory.materials[matId] || 0;
-                            const matDrop = LOOT_DROPS[matId];
-                            const hasEnough = available >= amount;
-                            
-                            return (
-                              <div key={matId} className="flex justify-between">
-                                <span>{matDrop?.name || matId}</span>
-                                <span className={hasEnough ? 'text-green-400' : 'text-red-400'}>
-                                  {available} / {amount}
-                                </span>
-                              </div>
-                            );
-                          })}
-                          
-                          <div className="flex justify-between mt-2">
-                            <span>Mana Cost:</span>
-                            <span className={rawMana >= recipe.manaCost ? 'text-green-400' : 'text-red-400'}>
-                              {fmt(recipe.manaCost)}
-                            </span>
-                          </div>
-                          
-                          <div className="flex justify-between">
-                            <span>Craft Time:</span>
-                            <span>{recipe.craftTime}h</span>
-                          </div>
-                        </div>
-                        
-                        <Button
-                          className="w-full mt-3"
-                          size="sm"
-                          disabled={!canCraft || currentAction === 'craft'}
-                          onClick={() => startCraftingEquipment(bpId)}
-                        >
-                          {canCraft ? 'Craft Equipment' : 'Missing Resources'}
-                        </Button>
-                      </div>
-                    );
-                  })
-                )}
-              </div>
-            </ScrollArea>
-          )}
-        </CardContent>
-      </Card>
-      
-      {/* Materials Inventory */}
-      <Card className="bg-gray-900/80 border-gray-700">
-        <CardHeader className="pb-2">
-          <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
-            <Package className="w-4 h-4" />
-            Materials ({Object.values(lootInventory.materials).reduce((a, b) => a + b, 0)})
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ScrollArea className="h-64">
-            {Object.keys(lootInventory.materials).length === 0 ? (
-              <div className="text-center text-gray-400 py-4">
-                <Sparkles className="w-12 h-12 mx-auto mb-2 opacity-50" />
-                <p>No materials collected yet.</p>
-                <p className="text-xs mt-1">Defeat floors to gather materials!</p>
-              </div>
-            ) : (
-              <div className="grid grid-cols-2 gap-2">
-                {Object.entries(lootInventory.materials).map(([matId, count]) => {
-                  if (count <= 0) return null;
-                  const drop = LOOT_DROPS[matId];
-                  if (!drop) return null;
-                  
-                  const rarityStyle = RARITY_COLORS[drop.rarity];
-                  
-                  return (
-                    <div
-                      key={matId}
-                      className="p-2 rounded border bg-gray-800/50 group relative"
-                      style={{ borderColor: rarityStyle?.color }}
-                    >
-                      <div className="flex items-start justify-between">
-                        <div>
-                          <div className="text-sm font-semibold" style={{ color: rarityStyle?.color }}>
-                            {drop.name}
-                          </div>
-                          <div className="text-xs text-gray-400">x{count}</div>
-                        </div>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-5 w-5 p-0 opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-300 hover:bg-red-900/20"
-                          onClick={() => deleteMaterial(matId, count)}
-                        >
-                          <Trash2 className="w-3 h-3" />
-                        </Button>
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </ScrollArea>
-        </CardContent>
-      </Card>
-    </div>
-  );
-  
   return (
     <div className="space-y-4">
       {/* Stage Tabs */}
@@ -884,16 +61,36 @@ export function CraftingTab({ store }: CraftingTabProps) {
         </TabsList>
 
         <TabsContent value="craft" className="mt-4">
-          {renderCraftStage()}
+          <EquipmentCrafter store={store} />
         </TabsContent>
         <TabsContent value="design" className="mt-4">
-          {renderDesignStage()}
+          <EnchantmentDesigner
+            store={store}
+            selectedEquipmentType={selectedEquipmentType}
+            setSelectedEquipmentType={setSelectedEquipmentType}
+            selectedEffects={selectedEffects}
+            setSelectedEffects={setSelectedEffects}
+            designName={designName}
+            setDesignName={setDesignName}
+            selectedDesign={selectedDesign}
+            setSelectedDesign={setSelectedDesign}
+          />
         </TabsContent>
         <TabsContent value="prepare" className="mt-4">
-          {renderPrepareStage()}
+          <EnchantmentPreparer
+            store={store}
+            selectedEquipmentInstance={selectedEquipmentInstance}
+            setSelectedEquipmentInstance={setSelectedEquipmentInstance}
+          />
         </TabsContent>
         <TabsContent value="apply" className="mt-4">
-          {renderApplyStage()}
+          <EnchantmentApplier
+            store={store}
+            selectedEquipmentInstance={selectedEquipmentInstance}
+            setSelectedEquipmentInstance={setSelectedEquipmentInstance}
+            selectedDesign={selectedDesign}
+            setSelectedDesign={setSelectedDesign}
+          />
         </TabsContent>
       </Tabs>
 

src/lib/game/computed-stats.ts

@@ -1,492 +1,12 @@
 // ─── Computed Stats and Utility Functions ───────────────────────────────────────
-// This module contains all computed stat functions and utility helpers
-// extracted from the main store for better organization
-
-import type { GameState, SpellCost, EquipmentInstance } from './types';
-import {
-  GUARDIANS,
-  SPELLS_DEF,
-  FLOOR_ELEM_CYCLE,
-  HOURS_PER_TICK,
-  MAX_DAY,
-  INCURSION_START_DAY,
-  ELEMENT_OPPOSITES,
-  ELEMENTS,
-  TICK_MS,
-} from './constants';
-import type { ComputedEffects } from './upgrade-effects';
-import { getUnifiedEffects, type UnifiedEffects } from './effects';
-import { EQUIPMENT_TYPES } from './data/equipment';
-import { ENCHANTMENT_EFFECTS } from './data/enchantment-effects';
-
-// ─── Default Effects Constant ───────────────────────────────────────────────────
-
-// Default empty effects for when effects aren't provided
-export const DEFAULT_EFFECTS: ComputedEffects = {
-  maxManaMultiplier: 1,
-  maxManaBonus: 0,
-  regenMultiplier: 1,
-  regenBonus: 0,
-  clickManaMultiplier: 1,
-  clickManaBonus: 0,
-  meditationEfficiency: 1,
-  spellCostMultiplier: 1,
-  conversionEfficiency: 1,
-  baseDamageMultiplier: 1,
-  baseDamageBonus: 0,
-  attackSpeedMultiplier: 1,
-  critChanceBonus: 0,
-  critDamageMultiplier: 1.5,
-  elementalDamageMultiplier: 1,
-  studySpeedMultiplier: 1,
-  studyCostMultiplier: 1,
-  progressRetention: 0,
-  instantStudyChance: 0,
-  freeStudyChance: 0,
-  elementCapMultiplier: 1,
-  elementCapBonus: 0,
-  conversionCostMultiplier: 1,
-  doubleCraftChance: 0,
-  permanentRegenBonus: 0,
-  specials: new Set(),
-  activeUpgrades: [],
-};
-
-// ─── Number Formatting Functions ────────────────────────────────────────────────
-
-export function fmt(n: number): string {
-  if (!isFinite(n) || isNaN(n)) return '0';
-  if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
-  if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
-  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
-  return Math.floor(n).toString();
-}
-
-export function fmtDec(n: number, d: number = 1): string {
-  return isFinite(n) ? n.toFixed(d) : '0';
-}
-
-// ─── Floor Functions ────────────────────────────────────────────────────────────
-
-export function getFloorMaxHP(floor: number): number {
-  if (GUARDIANS[floor]) return GUARDIANS[floor].hp;
-  // Improved scaling: slower early game, faster late game
-  const baseHP = 100;
-  const floorScaling = floor * 50;
-  const exponentialScaling = Math.pow(floor, 1.7);
-  return Math.floor(baseHP + floorScaling + exponentialScaling);
-}
-
-export function getFloorElement(floor: number): string {
-  return FLOOR_ELEM_CYCLE[(floor - 1) % FLOOR_ELEM_CYCLE.length];
-}
-
-// ─── Equipment Spell Helper ─────────────────────────────────────────────────────
-
-// Get all spells from equipped caster weapons (staves, wands, etc.)
-// Returns array of { spellId, equipmentInstanceId }
-export function getActiveEquipmentSpells(
-  equippedInstances: Record<string, string | null>,
-  equipmentInstances: Record<string, EquipmentInstance>
-): Array<{ spellId: string; equipmentId: string }> {
-  const spells: Array<{ spellId: string; equipmentId: string }> = [];
-  
-  // Check main hand and off hand for caster equipment
-  const weaponSlots = ['mainHand', 'offHand'] as const;
-  
-  for (const slot of weaponSlots) {
-    const instanceId = equippedInstances[slot];
-    if (!instanceId) continue;
-    
-    const instance = equipmentInstances[instanceId];
-    if (!instance) continue;
-    
-    // Check if this is a caster-type equipment
-    const equipType = EQUIPMENT_TYPES[instance.typeId];
-    if (!equipType || equipType.category !== 'caster') continue;
-    
-    // Get spells from enchantments
-    for (const ench of instance.enchantments) {
-      const effectDef = ENCHANTMENT_EFFECTS[ench.effectId];
-      if (effectDef?.effect.type === 'spell' && effectDef.effect.spellId) {
-        spells.push({
-          spellId: effectDef.effect.spellId,
-          equipmentId: instanceId,
-        });
-      }
-    }
-  }
-  
-  return spells;
-}
-
-// ─── Skill Level Helper ─────────────────────────────────────────────────────────
-
-// Helper to get effective skill level accounting for tiers
-export function getEffectiveSkillLevel(
-  skills: Record<string, number>,
-  baseSkillId: string,
-  skillTiers: Record<string, number> = {}
-): { level: number; tier: number; tierMultiplier: number } {
-  // Find the highest tier the player has for this base skill
-  const currentTier = skillTiers[baseSkillId] || 1;
-  
-  // Look for the tiered skill ID (e.g., manaFlow_t2)
-  const tieredSkillId = currentTier > 1 ? `${baseSkillId}_t${currentTier}` : baseSkillId;
-  const level = skills[tieredSkillId] || skills[baseSkillId] || 0;
-  
-  // Tier multiplier: each tier is 10x more powerful
-  const tierMultiplier = Math.pow(10, currentTier - 1);
-  
-  return { level, tier: currentTier, tierMultiplier };
-}
-
-// ─── Computed Stat Functions ────────────────────────────────────────────────────
-
-export function computeMaxMana(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers' | 'equipmentInstances' | 'equippedInstances'>,
-  effects?: ComputedEffects | UnifiedEffects
-): number {
-  const pu = state.prestigeUpgrades;
-  const base = 
-    100 +
-    (state.skills.manaWell || 0) * 100 +
-    (pu.manaWell || 0) * 500;
-  
-  // If effects not provided, compute unified effects (includes equipment)
-  if (!effects && state.equipmentInstances && state.equippedInstances) {
-    effects = getUnifiedEffects(state as any);
-  }
-  
-  // Apply effects if available (now includes equipment bonuses)
-  if (effects) {
-    return Math.floor((base + effects.maxManaBonus) * effects.maxManaMultiplier);
-  }
-  return base;
-}
-
-export function computeElementMax(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers'>,
-  effects?: ComputedEffects
-): number {
-  const pu = state.prestigeUpgrades;
-  const base = 10 + (state.skills.elemAttune || 0) * 50 + (pu.elementalAttune || 0) * 25;
-  
-  // Apply upgrade effects if provided
-  if (effects) {
-    return Math.floor((base + effects.elementCapBonus) * effects.elementCapMultiplier);
-  }
-  return base;
-}
-
-export function computeRegen(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers' | 'equipmentInstances' | 'equippedInstances'>,
-  effects?: ComputedEffects | UnifiedEffects
-): number {
-  const pu = state.prestigeUpgrades;
-  const temporalBonus = 1 + (pu.temporalEcho || 0) * 0.1;
-  const base =
-    2 +
-    (state.skills.manaFlow || 0) * 1 +
-    (state.skills.manaSpring || 0) * 2 +
-    (pu.manaFlow || 0) * 0.5;
-  
-  let regen = base * temporalBonus;
-  
-  // If effects not provided, compute unified effects (includes equipment)
-  if (!effects && state.equipmentInstances && state.equippedInstances) {
-    effects = getUnifiedEffects(state as any);
-  }
-  
-  // Apply effects if available (now includes equipment bonuses)
-  if (effects) {
-    regen = (regen + effects.regenBonus + effects.permanentRegenBonus) * effects.regenMultiplier;
-  }
-  
-  return regen;
-}
-
-/**
- * Compute regen with dynamic special effects (needs current mana, max mana, incursion)
- */
-export function computeEffectiveRegen(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'rawMana' | 'incursionStrength' | 'skillUpgrades' | 'skillTiers' | 'equipmentInstances' | 'equippedInstances'>,
-  effects?: ComputedEffects | UnifiedEffects
-): number {
-  // Base regen from existing function
-  let regen = computeRegen(state, effects);
-  
-  const maxMana = computeMaxMana(state, effects);
-  const currentMana = state.rawMana;
-  const incursionStrength = state.incursionStrength || 0;
-  
-  // Apply incursion penalty
-  regen *= (1 - incursionStrength);
-  
-  return regen;
-}
-
-export function computeClickMana(
-  state: Pick<GameState, 'skills' | 'skillUpgrades' | 'skillTiers' | 'equipmentInstances' | 'equippedInstances'>,
-  effects?: ComputedEffects | UnifiedEffects
-): number {
-  const base = 
-    1 +
-    (state.skills.manaTap || 0) * 1 +
-    (state.skills.manaSurge || 0) * 3;
-  
-  // If effects not provided, compute unified effects (includes equipment)
-  if (!effects && state.equipmentInstances && state.equippedInstances) {
-    effects = getUnifiedEffects(state as any);
-  }
-  
-  // Apply effects if available (now includes equipment bonuses)
-  if (effects) {
-    return Math.floor((base + effects.clickManaBonus) * effects.clickManaMultiplier);
-  }
-  return base;
-}
-
-// ─── Damage Calculation Helpers ─────────────────────────────────────────────────
-
-// Elemental damage bonus: +50% if spell element opposes floor element (super effective)
-// -25% if spell element matches its own opposite (weak)
-export function getElementalBonus(spellElem: string, floorElem: string): number {
-  if (spellElem === 'raw') return 1.0; // Raw mana has no elemental bonus
-  
-  if (spellElem === floorElem) return 1.25; // Same element: +25% damage
-  
-  // Check for super effective first: spell is the opposite of floor
-  // e.g., casting water (opposite of fire) at fire floor = super effective
-  if (ELEMENT_OPPOSITES[floorElem] === spellElem) return 1.5; // Super effective: +50% damage
-  
-  // Check for weak: spell's opposite matches floor
-  // e.g., casting fire (whose opposite is water) at water floor = weak
-  if (ELEMENT_OPPOSITES[spellElem] === floorElem) return 0.75; // Weak: -25% damage
-  
-  return 1.0; // Neutral
-}
-
-export function calcDamage(
-  state: Pick<GameState, 'skills' | 'signedPacts'>, 
-  spellId: string, 
-  floorElem?: string
-): number {
-  const sp = SPELLS_DEF[spellId];
-  if (!sp) return 5;
-  const skills = state.skills;
-  const baseDmg = sp.dmg + (skills.combatTrain || 0) * 5;
-  const pct = 1 + (skills.arcaneFury || 0) * 0.1;
-  
-  // Elemental mastery bonus
-  const elemMasteryBonus = 1 + (skills.elementalMastery || 0) * 0.15;
-  
-  // Guardian bane bonus
-  const guardianBonus = floorElem && GUARDIANS[Object.values(GUARDIANS).find(g => g.element === floorElem)?.hp ? 0 : 0]
-    ? 1 + (skills.guardianBane || 0) * 0.2
-    : 1;
-  
-  const critChance = (skills.precision || 0) * 0.05;
-  const pactMult = state.signedPacts.reduce(
-    (m, f) => m * (GUARDIANS[f]?.pact || 1),
-    1
-  );
-  
-  let damage = baseDmg * pct * pactMult * elemMasteryBonus;
-  
-  // Apply elemental bonus if floor element provided
-  if (floorElem) {
-    damage *= getElementalBonus(sp.elem, floorElem);
-  }
-  
-  // Apply crit
-  if (Math.random() < critChance) {
-    damage *= 1.5;
-  }
-  
-  return damage;
-}
-
-// ─── Insight Calculation ────────────────────────────────────────────────────────
-
-export function calcInsight(state: Pick<GameState, 'maxFloorReached' | 'totalManaGathered' | 'signedPacts' | 'prestigeUpgrades' | 'skills'>): number {
-  const pu = state.prestigeUpgrades;
-  const skillBonus = 1 + (state.skills.insightHarvest || 0) * 0.1;
-  const mult = (1 + (pu.insightAmp || 0) * 0.25) * skillBonus;
-  return Math.floor(
-    (state.maxFloorReached * 15 + state.totalManaGathered / 500 + state.signedPacts.length * 150) * mult
-  );
-}
-
-// ─── Meditation Bonus ───────────────────────────────────────────────────────────
-
-// Meditation bonus now affects regen rate directly
-export function getMeditationBonus(meditateTicks: number, skills: Record<string, number>, meditationEfficiency: number = 1): number {
-  const hasMeditation = skills.meditation === 1;
-  const hasDeepTrance = skills.deepTrance === 1;
-  const hasVoidMeditation = skills.voidMeditation === 1;
-  
-  const hours = meditateTicks * HOURS_PER_TICK;
-  
-  // Base meditation: ramps up over 4 hours to 1.5x
-  let bonus = 1 + Math.min(hours / 4, 0.5);
-  
-  // With Meditation Focus: up to 2.5x after 4 hours
-  if (hasMeditation && hours >= 4) {
-    bonus = 2.5;
-  }
-  
-  // With Deep Trance: up to 3.0x after 6 hours
-  if (hasDeepTrance && hours >= 6) {
-    bonus = 3.0;
-  }
-  
-  // With Void Meditation: up to 5.0x after 8 hours
-  if (hasVoidMeditation && hours >= 8) {
-    bonus = 5.0;
-  }
-  
-  // Apply meditation efficiency from upgrades (Deep Wellspring, etc.)
-  bonus *= meditationEfficiency;
-  
-  return bonus;
-}
-
-// ─── Incursion Strength ─────────────────────────────────────────────────────────
-
-export function getIncursionStrength(day: number, hour: number): number {
-  if (day < INCURSION_START_DAY) return 0;
-  const totalHours = (day - INCURSION_START_DAY) * 24 + hour;
-  const maxHours = (MAX_DAY - INCURSION_START_DAY) * 24;
-  return Math.min(0.95, (totalHours / maxHours) * 0.95);
-}
-
-// ─── Spell Cost Helpers ─────────────────────────────────────────────────────────
-
-// Check if player can afford spell cost
-export function canAffordSpellCost(
-  cost: SpellCost, 
-  rawMana: number, 
-  elements: Record<string, { current: number; max: number; unlocked: boolean }>
-): boolean {
-  if (cost.type === 'raw') {
-    return rawMana >= cost.amount;
-  } else {
-    const elem = elements[cost.element || ''];
-    return elem && elem.unlocked && elem.current >= cost.amount;
-  }
-}
-
-// Deduct spell cost from appropriate mana pool
-export function deductSpellCost(
-  cost: SpellCost,
-  rawMana: number,
-  elements: Record<string, { current: number; max: number; unlocked: boolean }>
-): { rawMana: number; elements: Record<string, { current: number; max: number; unlocked: boolean }> } {
-  const newElements = { ...elements };
-  
-  if (cost.type === 'raw') {
-    // Clamp to 0 to prevent negative mana
-    return { rawMana: Math.max(0, rawMana - cost.amount), elements: newElements };
-  } else if (cost.element && newElements[cost.element]) {
-    newElements[cost.element] = {
-      ...newElements[cost.element],
-      current: Math.max(0, newElements[cost.element].current - cost.amount)
-    };
-    return { rawMana, elements: newElements };
-  }
-  
-  return { rawMana, elements: newElements };
-}
-
-// ─── Damage Breakdown Helper ───────────────────────────────────────────────────
-
-export interface DamageBreakdown {
-  base: number;
-  combatTrainBonus: number;
-  arcaneFuryMult: number;
-  elemMasteryMult: number;
-  guardianBaneMult: number;
-  pactMult: number;
-  precisionChance: number;
-  elemBonus: number;
-  elemBonusText: string;
-  total: number;
-}
-
-export function getDamageBreakdown(
-  state: Pick<GameState, 'skills' | 'signedPacts'>,
-  activeSpellId: string,
-  floorElem: string,
-  isGuardianFloor: boolean
-): DamageBreakdown | null {
-  const spell = SPELLS_DEF[activeSpellId];
-  if (!spell) return null;
-  
-  const baseDmg = spell.dmg;
-  const combatTrainBonus = (state.skills.combatTrain || 0) * 5;
-  const arcaneFuryMult = 1 + (state.skills.arcaneFury || 0) * 0.1;
-  const elemMasteryMult = 1 + (state.skills.elementalMastery || 0) * 0.15;
-  const guardianBaneMult = isGuardianFloor ? (1 + (state.skills.guardianBane || 0) * 0.2) : 1;
-  const pactMult = state.signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1);
-  const precisionChance = (state.skills.precision || 0) * 0.05;
-  
-  // Elemental bonus
-  let elemBonus = 1.0;
-  let elemBonusText = '';
-  if (spell.elem !== 'raw' && floorElem) {
-    if (spell.elem === floorElem) {
-      elemBonus = 1.25;
-      elemBonusText = '+25% same element';
-    } else if (ELEMENTS[spell.elem] && ELEMENT_OPPOSITES[floorElem] === spell.elem) {
-      elemBonus = 1.5;
-      elemBonusText = '+50% super effective';
-    }
-  }
-  
-  return {
-    base: baseDmg,
-    combatTrainBonus,
-    arcaneFuryMult,
-    elemMasteryMult,
-    guardianBaneMult,
-    pactMult,
-    precisionChance,
-    elemBonus,
-    elemBonusText,
-    total: calcDamage(state, activeSpellId, floorElem)
-  };
-}
-
-// ─── Total DPS Calculation ─────────────────────────────────────────────────────
-
-export function getTotalDPS(
-  state: Pick<GameState, 'skills' | 'signedPacts' | 'equippedInstances' | 'equipmentInstances'>,
-  upgradeEffects: { attackSpeedMultiplier: number },
-  floorElem: string
-): number {
-  const quickCastBonus = 1 + (state.skills.quickCast || 0) * 0.05;
-  const attackSpeedMult = upgradeEffects.attackSpeedMultiplier;
-  const castsPerSecondMult = HOURS_PER_TICK / (TICK_MS / 1000);
-  
-  const activeEquipmentSpells = getActiveEquipmentSpells(
-    state.equippedInstances,
-    state.equipmentInstances
-  );
-  
-  let totalDPS = 0;
-  
-  for (const { spellId } of activeEquipmentSpells) {
-    const spell = SPELLS_DEF[spellId];
-    if (!spell) continue;
-    
-    const spellCastSpeed = spell.castSpeed || 1;
-    const totalCastSpeed = spellCastSpeed * quickCastBonus * attackSpeedMult;
-    const damagePerCast = calcDamage(state, spellId, floorElem);
-    const castsPerSecond = totalCastSpeed * castsPerSecondMult;
-    
-    totalDPS += damagePerCast * castsPerSecond;
-  }
-  
-  return totalDPS;
-}
+// This module now re-exports from focused utility modules for better organization
+// 
+// The functions have been split into:
+// - ./utils/formatting.ts - Number formatting (fmt, fmtDec)
+// - ./utils/floor-utils.ts - Floor functions (getFloorMaxHP, getFloorElement)
+// - ./utils/mana-utils.ts - Mana calculations (computeMaxMana, computeElementMax, etc.)
+// - ./utils/combat-utils.ts - Combat functions (calcDamage, calcInsight, getTotalDPS, etc.)
+//
+// All exports are maintained for backward compatibility.
+
+export * from './utils/index';

src/lib/game/utils.ts

@@ -1,372 +1,5 @@
-// ─── Game Utilities ───────────────────────────────────────────────────────────
+// ─── Game Utilities - Re-export from focused modules ───────────────────────
+// This file is kept for backward compatibility
+// All utilities have been moved to focused modules in the utils/ directory
 
-import type { GameState, SpellCost } from './types';
-import type { ComputedEffects } from './upgrade-effects';
-import {
-  GUARDIANS,
-  SPELLS_DEF,
-  FLOOR_ELEM_CYCLE,
-  HOURS_PER_TICK,
-  MAX_DAY,
-  INCURSION_START_DAY,
-  ELEMENT_OPPOSITES,
-} from './constants';
-
-// ─── Formatting Functions ─────────────────────────────────────────────────────
-
-export function fmt(n: number): string {
-  if (!isFinite(n) || isNaN(n)) return '0';
-  if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
-  if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
-  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
-  return Math.floor(n).toString();
-}
-
-export function fmtDec(n: number, d: number = 1): string {
-  return isFinite(n) ? n.toFixed(d) : '0';
-}
-
-// ─── Floor Helpers ────────────────────────────────────────────────────────────
-
-export function getFloorMaxHP(floor: number): number {
-  if (GUARDIANS[floor]) return GUARDIANS[floor].hp;
-  // Improved scaling: slower early game, faster late game
-  const baseHP = 100;
-  const floorScaling = floor * 50;
-  const exponentialScaling = Math.pow(floor, 1.7);
-  return Math.floor(baseHP + floorScaling + exponentialScaling);
-}
-
-export function getFloorElement(floor: number): string {
-  return FLOOR_ELEM_CYCLE[(floor - 1) % FLOOR_ELEM_CYCLE.length];
-}
-
-// ─── Computed Stats Functions ─────────────────────────────────────────────────
-
-export function computeMaxMana(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers'>,
-  effects?: ComputedEffects
-): number {
-  const pu = state.prestigeUpgrades;
-  const base = 
-    100 +
-    (state.skills.manaWell || 0) * 100 +
-    (pu.manaWell || 0) * 500;
-  
-  // Apply upgrade effects if provided
-  if (effects) {
-    return Math.floor((base + effects.maxManaBonus) * effects.maxManaMultiplier);
-  }
-  return base;
-}
-
-export function computeElementMax(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers'>,
-  effects?: ComputedEffects
-): number {
-  const pu = state.prestigeUpgrades;
-  const base = 10 + (state.skills.elemAttune || 0) * 50 + (pu.elementalAttune || 0) * 25;
-  
-  // Apply upgrade effects if provided
-  if (effects) {
-    return Math.floor((base + effects.elementCapBonus) * effects.elementCapMultiplier);
-  }
-  return base;
-}
-
-export function computeRegen(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers'>,
-  effects?: ComputedEffects
-): number {
-  const pu = state.prestigeUpgrades;
-  const temporalBonus = 1 + (pu.temporalEcho || 0) * 0.1;
-  const base =
-    2 +
-    (state.skills.manaFlow || 0) * 1 +
-    (state.skills.manaSpring || 0) * 2 +
-    (pu.manaFlow || 0) * 0.5;
-  
-  let regen = base * temporalBonus;
-  
-  // Apply upgrade effects if provided
-  if (effects) {
-    regen = (regen + effects.regenBonus + effects.permanentRegenBonus) * effects.regenMultiplier;
-  }
-  
-  return regen;
-}
-
-/**
- * Compute regen with dynamic special effects (needs current mana, max mana, incursion)
- */
-export function computeEffectiveRegen(
-  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'rawMana' | 'incursionStrength' | 'skillUpgrades' | 'skillTiers'>,
-  effects?: ComputedEffects
-): number {
-  // Base regen from existing function
-  let regen = computeRegen(state, effects);
-  
-  const incursionStrength = state.incursionStrength || 0;
-  
-  // Apply incursion penalty
-  regen *= (1 - incursionStrength);
-  
-  return regen;
-}
-
-export function computeClickMana(state: Pick<GameState, 'skills'>): number {
-  return (
-    1 +
-    (state.skills.manaTap || 0) * 1 +
-    (state.skills.manaSurge || 0) * 3
-  );
-}
-
-// ─── Elemental Damage Bonus ──────────────────────────────────────────────────
-
-// Elemental damage bonus: +50% if spell element opposes floor element (super effective)
-// -25% if spell element matches its own opposite (weak)
-export function getElementalBonus(spellElem: string, floorElem: string): number {
-  if (spellElem === 'raw') return 1.0; // Raw mana has no elemental bonus
-  
-  if (spellElem === floorElem) return 1.25; // Same element: +25% damage
-  
-  // Check for super effective first: spell is the opposite of floor
-  // e.g., casting water (opposite of fire) at fire floor = super effective
-  if (ELEMENT_OPPOSITES[floorElem] === spellElem) return 1.5; // Super effective: +50% damage
-  
-  // Check for weak: spell's opposite matches floor
-  // e.g., casting fire (whose opposite is water) at water floor = weak
-  if (ELEMENT_OPPOSITES[spellElem] === floorElem) return 0.75; // Weak: -25% damage
-  
-  return 1.0; // Neutral
-}
-
-// ─── Boon Bonuses ─────────────────────────────────────────────────────────────
-
-// Helper to calculate total boon bonuses from signed pacts
-export function getBoonBonuses(signedPacts: number[]): {
-  maxMana: number;
-  manaRegen: number;
-  castingSpeed: number;
-  elementalDamage: number;
-  rawDamage: number;
-  critChance: number;
-  critDamage: number;
-  spellEfficiency: number;
-  manaGain: number;
-  insightGain: number;
-  studySpeed: number;
-  prestigeInsight: number;
-} {
-  const bonuses = {
-    maxMana: 0,
-    manaRegen: 0,
-    castingSpeed: 0,
-    elementalDamage: 0,
-    rawDamage: 0,
-    critChance: 0,
-    critDamage: 0,
-    spellEfficiency: 0,
-    manaGain: 0,
-    insightGain: 0,
-    studySpeed: 0,
-    prestigeInsight: 0,
-  };
-  
-  for (const floor of signedPacts) {
-    const guardian = GUARDIANS[floor];
-    if (!guardian) continue;
-    
-    for (const boon of guardian.boons) {
-      switch (boon.type) {
-        case 'maxMana':
-          bonuses.maxMana += boon.value;
-          break;
-        case 'manaRegen':
-          bonuses.manaRegen += boon.value;
-          break;
-        case 'castingSpeed':
-          bonuses.castingSpeed += boon.value;
-          break;
-        case 'elementalDamage':
-          bonuses.elementalDamage += boon.value;
-          break;
-        case 'rawDamage':
-          bonuses.rawDamage += boon.value;
-          break;
-        case 'critChance':
-          bonuses.critChance += boon.value;
-          break;
-        case 'critDamage':
-          bonuses.critDamage += boon.value;
-          break;
-        case 'spellEfficiency':
-          bonuses.spellEfficiency += boon.value;
-          break;
-        case 'manaGain':
-          bonuses.manaGain += boon.value;
-          break;
-        case 'insightGain':
-          bonuses.insightGain += boon.value;
-          break;
-        case 'studySpeed':
-          bonuses.studySpeed += boon.value;
-          break;
-        case 'prestigeInsight':
-          bonuses.prestigeInsight += boon.value;
-          break;
-      }
-    }
-  }
-  
-  return bonuses;
-}
-
-// ─── Damage Calculation ───────────────────────────────────────────────────────
-
-export function calcDamage(
-  state: Pick<GameState, 'skills' | 'signedPacts'>, 
-  spellId: string, 
-  floorElem?: string
-): number {
-  const sp = SPELLS_DEF[spellId];
-  if (!sp) return 5;
-  const skills = state.skills;
-  const baseDmg = sp.dmg + (skills.combatTrain || 0) * 5;
-  const pct = 1 + (skills.arcaneFury || 0) * 0.1;
-  
-  // Elemental mastery bonus
-  const elemMasteryBonus = 1 + (skills.elementalMastery || 0) * 0.15;
-  
-  // Guardian bane bonus - check if current floor has a guardian with matching element
-  const isGuardianFloor = floorElem && Object.values(GUARDIANS).some(g => g.element === floorElem);
-  const guardianBonus = isGuardianFloor
-    ? 1 + (skills.guardianBane || 0) * 0.2
-    : 1;
-  
-  // Get boon bonuses from pacts
-  const boons = getBoonBonuses(state.signedPacts);
-  
-  // Apply raw damage and elemental damage bonuses
-  const rawDamageMult = 1 + boons.rawDamage / 100;
-  const elemDamageMult = 1 + boons.elementalDamage / 100;
-  
-  // Apply crit chance and damage from boons
-  const critChance = (skills.precision || 0) * 0.05 + boons.critChance / 100;
-  const critDamageMult = 1.5 + boons.critDamage / 100;
-  
-  let damage = baseDmg * pct * elemMasteryBonus * guardianBonus * rawDamageMult * elemDamageMult;
-  
-  // Apply elemental bonus if floor element provided
-  if (floorElem) {
-    damage *= getElementalBonus(sp.elem, floorElem);
-  }
-  
-  // Apply crit
-  if (Math.random() < critChance) {
-    damage *= critDamageMult;
-  }
-  
-  return damage;
-}
-
-// ─── Insight Calculation ──────────────────────────────────────────────────────
-
-export function calcInsight(state: Pick<GameState, 'maxFloorReached' | 'totalManaGathered' | 'signedPacts' | 'prestigeUpgrades' | 'skills'>): number {
-  const pu = state.prestigeUpgrades;
-  const skillBonus = 1 + (state.skills.insightHarvest || 0) * 0.1;
-  
-  // Get boon bonuses for insight gain
-  const boons = getBoonBonuses(state.signedPacts);
-  const boonInsightMult = 1 + boons.insightGain / 100;
-  
-  const mult = (1 + (pu.insightAmp || 0) * 0.25) * skillBonus * boonInsightMult;
-  
-  // Add prestigeInsight bonus per loop
-  const prestigeInsightBonus = boons.prestigeInsight;
-  
-  return Math.floor(
-    (state.maxFloorReached * 15 + state.totalManaGathered / 500 + state.signedPacts.length * 150 + prestigeInsightBonus) * mult
-  );
-}
-
-// ─── Meditation Bonus ─────────────────────────────────────────────────────────
-
-// Meditation bonus now affects regen rate directly
-export function getMeditationBonus(meditateTicks: number, skills: Record<string, number>, meditationEfficiency: number = 1): number {
-  const hasMeditation = skills.meditation === 1;
-  const hasDeepTrance = skills.deepTrance === 1;
-  const hasVoidMeditation = skills.voidMeditation === 1;
-  
-  const hours = meditateTicks * HOURS_PER_TICK;
-  
-  // Base meditation: ramps up over 4 hours to 1.5x
-  let bonus = 1 + Math.min(hours / 4, 0.5);
-  
-  // With Meditation Focus: up to 2.5x after 4 hours
-  if (hasMeditation && hours >= 4) {
-    bonus = 2.5;
-  }
-  
-  // With Deep Trance: up to 3.0x after 6 hours
-  if (hasDeepTrance && hours >= 6) {
-    bonus = 3.0;
-  }
-  
-  // With Void Meditation: up to 5.0x after 8 hours
-  if (hasVoidMeditation && hours >= 8) {
-    bonus = 5.0;
-  }
-  
-  // Apply meditation efficiency from upgrades (Deep Wellspring, etc.)
-  bonus *= meditationEfficiency;
-  
-  return bonus;
-}
-
-// ─── Incursion Strength ───────────────────────────────────────────────────────
-
-export function getIncursionStrength(day: number, hour: number): number {
-  if (day < INCURSION_START_DAY) return 0;
-  const totalHours = (day - INCURSION_START_DAY) * 24 + hour;
-  const maxHours = (MAX_DAY - INCURSION_START_DAY) * 24;
-  return Math.min(0.95, (totalHours / maxHours) * 0.95);
-}
-
-// ─── Spell Cost Helpers ───────────────────────────────────────────────────────
-
-// Check if player can afford spell cost
-export function canAffordSpellCost(
-  cost: SpellCost, 
-  rawMana: number, 
-  elements: Record<string, { current: number; max: number; unlocked: boolean }>
-): boolean {
-  if (cost.type === 'raw') {
-    return rawMana >= cost.amount;
-  } else {
-    const elem = elements[cost.element || ''];
-    return elem && elem.unlocked && elem.current >= cost.amount;
-  }
-}
-
-// Deduct spell cost from appropriate mana pool
-export function deductSpellCost(
-  cost: SpellCost,
-  rawMana: number,
-  elements: Record<string, { current: number; max: number; unlocked: boolean }>
-): { rawMana: number; elements: Record<string, { current: number; max: number; unlocked: boolean }> } {
-  const newElements = { ...elements };
-  
-  if (cost.type === 'raw') {
-    return { rawMana: rawMana - cost.amount, elements: newElements };
-  } else if (cost.element && newElements[cost.element]) {
-    newElements[cost.element] = {
-      ...newElements[cost.element],
-      current: newElements[cost.element].current - cost.amount
-    };
-    return { rawMana, elements: newElements };
-  }
-  
-  return { rawMana, elements: newElements };
-}
+export * from './utils';

src/lib/game/utils/combat-utils.ts

@@ -0,0 +1,286 @@
+// ─── Combat Utilities ────────────────────────────────────────────────────────
+
+import type { GameState, SpellCost, EquipmentInstance } from '../types';
+import { GUARDIANS, SPELLS_DEF, ELEMENT_OPPOSITES, INCURSION_START_DAY, MAX_DAY } from '../constants';
+import { ENCHANTMENT_EFFECTS } from '../data/enchantment-effects';
+
+// ─── Elemental Damage Bonus ──────────────────────────────────────────────────
+
+// Elemental damage bonus: +50% if spell element opposes floor element (super effective)
+// -25% if spell element matches its own opposite (weak)
+export function getElementalBonus(spellElem: string, floorElem: string): number {
+  if (spellElem === 'raw') return 1.0; // Raw mana has no elemental bonus
+  
+  if (spellElem === floorElem) return 1.25; // Same element: +25% damage
+  
+  // Check for super effective first: spell is the opposite of floor
+  // e.g., casting water (opposite of fire) at fire floor = super effective
+  if (ELEMENT_OPPOSITES[floorElem] === spellElem) return 1.5; // Super effective: +50% damage
+  
+  // Check for weak: spell's opposite matches floor
+  // e.g., casting fire (whose opposite is water) at water floor = weak
+  if (ELEMENT_OPPOSITES[spellElem] === floorElem) return 0.75; // Weak: -25% damage
+  
+  return 1.0; // Neutral
+}
+
+// ─── Boon Bonuses ─────────────────────────────────────────────────────────────
+
+// Helper to calculate total boon bonuses from signed pacts
+export function getBoonBonuses(signedPacts: number[]): {
+  maxMana: number;
+  manaRegen: number;
+  castingSpeed: number;
+  elementalDamage: number;
+  rawDamage: number;
+  critChance: number;
+  critDamage: number;
+  spellEfficiency: number;
+  manaGain: number;
+  insightGain: number;
+  studySpeed: number;
+  prestigeInsight: number;
+} {
+  const bonuses = {
+    maxMana: 0,
+    manaRegen: 0,
+    castingSpeed: 0,
+    elementalDamage: 0,
+    rawDamage: 0,
+    critChance: 0,
+    critDamage: 0,
+    spellEfficiency: 0,
+    manaGain: 0,
+    insightGain: 0,
+    studySpeed: 0,
+    prestigeInsight: 0,
+  };
+  
+  for (const floor of signedPacts) {
+    const guardian = GUARDIANS[floor];
+    if (!guardian) continue;
+    
+    for (const boon of guardian.boons) {
+      switch (boon.type) {
+        case 'maxMana':
+          bonuses.maxMana += boon.value;
+          break;
+        case 'manaRegen':
+          bonuses.manaRegen += boon.value;
+          break;
+        case 'castingSpeed':
+          bonuses.castingSpeed += boon.value;
+          break;
+        case 'elementalDamage':
+          bonuses.elementalDamage += boon.value;
+          break;
+        case 'rawDamage':
+          bonuses.rawDamage += boon.value;
+          break;
+        case 'critChance':
+          bonuses.critChance += boon.value;
+          break;
+        case 'critDamage':
+          bonuses.critDamage += boon.value;
+          break;
+        case 'spellEfficiency':
+          bonuses.spellEfficiency += boon.value;
+          break;
+        case 'manaGain':
+          bonuses.manaGain += boon.value;
+          break;
+        case 'insightGain':
+          bonuses.insightGain += boon.value;
+          break;
+        case 'studySpeed':
+          bonuses.studySpeed += boon.value;
+          break;
+        case 'prestigeInsight':
+          bonuses.prestigeInsight += boon.value;
+          break;
+      }
+    }
+  }
+  
+  return bonuses;
+}
+
+// ─── Damage Calculation ───────────────────────────────────────────────────────
+
+export function calcDamage(
+  state: Pick<GameState, 'skills' | 'signedPacts'>, 
+  spellId: string, 
+  floorElem?: string
+): number {
+  const sp = SPELLS_DEF[spellId];
+  if (!sp) return 5;
+  const skills = state.skills;
+  const baseDmg = sp.dmg + (skills.combatTrain || 0) * 5;
+  const pct = 1 + (skills.arcaneFury || 0) * 0.1;
+  
+  // Elemental mastery bonus
+  const elemMasteryBonus = 1 + (skills.elementalMastery || 0) * 0.15;
+  
+  // Guardian bane bonus - check if current floor has a guardian with matching element
+  const isGuardianFloor = floorElem && Object.values(GUARDIANS).some(g => g.element === floorElem);
+  const guardianBonus = isGuardianFloor
+    ? 1 + (skills.guardianBane || 0) * 0.2
+    : 1;
+  
+  // Get boon bonuses from pacts
+  const boons = getBoonBonuses(state.signedPacts);
+  
+  // Apply raw damage and elemental damage bonuses
+  const rawDamageMult = 1 + boons.rawDamage / 100;
+  const elemDamageMult = 1 + boons.elementalDamage / 100;
+  
+  // Apply crit chance and damage from boons
+  const critChance = (skills.precision || 0) * 0.05 + boons.critChance / 100;
+  const critDamageMult = 1.5 + boons.critDamage / 100;
+  
+  let damage = baseDmg * pct * elemMasteryBonus * guardianBonus * rawDamageMult * elemDamageMult;
+  
+  // Apply elemental bonus if floor element provided
+  if (floorElem) {
+    damage *= getElementalBonus(sp.elem, floorElem);
+  }
+  
+  // Apply crit
+  if (Math.random() < critChance) {
+    damage *= critDamageMult;
+  }
+  
+  return damage;
+}
+
+// ─── Insight Calculation ──────────────────────────────────────────────────────
+
+export function calcInsight(state: Pick<GameState, 'maxFloorReached' | 'totalManaGathered' | 'signedPacts' | 'prestigeUpgrades' | 'skills'>): number {
+  const pu = state.prestigeUpgrades;
+  const skillBonus = 1 + (state.skills.insightHarvest || 0) * 0.1;
+  
+  // Get boon bonuses for insight gain
+  const boons = getBoonBonuses(state.signedPacts);
+  const boonInsightMult = 1 + boons.insightGain / 100;
+  
+  const mult = (1 + (pu.insightAmp || 0) * 0.25) * skillBonus * boonInsightMult;
+  
+  // Add prestigeInsight bonus per loop
+  const prestigeInsightBonus = boons.prestigeInsight;
+  
+  return Math.floor(
+    (state.maxFloorReached * 15 + state.totalManaGathered / 500 + state.signedPacts.length * 150 + prestigeInsightBonus) * mult
+  );
+}
+
+// ─── Incursion Strength ───────────────────────────────────────────────────────
+
+export function getIncursionStrength(day: number, hour: number): number {
+  if (day < INCURSION_START_DAY) return 0;
+  const totalHours = (day - INCURSION_START_DAY) * 24 + hour;
+  const maxHours = (MAX_DAY - INCURSION_START_DAY) * 24;
+  return Math.min(0.95, (totalHours / maxHours) * 0.95);
+}
+
+// ─── Spell Cost Helpers ───────────────────────────────────────────────────────
+
+// Check if player can afford spell cost
+export function canAffordSpellCost(
+  cost: SpellCost, 
+  rawMana: number, 
+  elements: Record<string, { current: number; max: number; unlocked: boolean }>
+): boolean {
+  if (cost.type === 'raw') {
+    return rawMana >= cost.amount;
+  } else {
+    const elem = elements[cost.element || ''];
+    return elem && elem.unlocked && elem.current >= cost.amount;
+  }
+}
+
+// Deduct spell cost from appropriate mana pool
+export function deductSpellCost(
+  cost: SpellCost,
+  rawMana: number,
+  elements: Record<string, { current: number; max: number; unlocked: boolean }>
+): { rawMana: number; elements: Record<string, { current: number; max: number; unlocked: boolean }> } {
+  const newElements = { ...elements };
+  
+  if (cost.type === 'raw') {
+    return { rawMana: rawMana - cost.amount, elements: newElements };
+  } else if (cost.element && newElements[cost.element]) {
+    newElements[cost.element] = {
+      ...newElements[cost.element],
+      current: newElements[cost.element].current - cost.amount
+    };
+    return { rawMana, elements: newElements };
+  }
+  
+  return { rawMana, elements: newElements };
+}
+
+// ─── Equipment Spell Helpers ──────────────────────────────────────────────────
+
+// Get active spells from equipped equipment
+export function getActiveEquipmentSpells(
+  equippedInstances: Record<string, string | null>,
+  equipmentInstances: Record<string, EquipmentInstance>
+): string[] {
+  const equippedIds = Object.values(equippedInstances).filter((id): id is string => id !== null);
+  const spells: string[] = [];
+  
+  for (const id of equippedIds) {
+    const instance = equipmentInstances[id];
+    if (!instance) continue;
+    
+    for (const ench of instance.enchantments) {
+      const effectDef = ENCHANTMENT_EFFECTS[ench.effectId];
+      if (effectDef?.effect.type === 'spell' && effectDef.effect.spellId) {
+        spells.push(effectDef.effect.spellId);
+      }
+    }
+  }
+  
+  return [...new Set(spells)];
+}
+
+// ─── DPS Calculation ──────────────────────────────────────────────────────────
+
+// Compute total DPS from all sources (spells, equipment, etc.)
+export function getTotalDPS(
+  state: Pick<GameState, 'skills' | 'signedPacts' | 'equippedInstances' | 'equipmentInstances' | 'spells' | 'prestigeUpgrades'>,
+  upgradeEffects: { spellDamageBonus?: number; attackSpeedMultiplier?: number; [key: string]: unknown },
+  floorElem?: string
+): number {
+  let totalDPS = 0;
+  
+  // Get active equipment spells
+  const activeSpells = getActiveEquipmentSpells(state.equippedInstances, state.equipmentInstances);
+  
+  // Calculate DPS for each active spell
+  for (const spellId of activeSpells) {
+    const spellDef = SPELLS_DEF[spellId];
+    if (!spellDef) continue;
+    
+    // Calculate damage per cast
+    const damage = calcDamage(state, spellId, floorElem);
+    
+    // Get cast speed (spells per second)
+    // Base cast time is 1 second, modified by casting speed bonuses
+    const baseCastTime = spellDef.baseCastTime || 1.0;
+    const castingSpeedBonus = 1 + (state.skills.castingSpeed || 0) * 0.1;
+    const equipmentAttackSpeed = upgradeEffects.attackSpeedMultiplier || 1;
+    const castTime = baseCastTime / (castingSpeedBonus * equipmentAttackSpeed);
+    
+    // DPS for this spell
+    const spellDPS = damage / castTime;
+    totalDPS += spellDPS;
+  }
+  
+  // Add equipment DPS bonuses from upgrade effects
+  if (upgradeEffects.spellDamageBonus) {
+    totalDPS *= (1 + upgradeEffects.spellDamageBonus / 100);
+  }
+  
+  return totalDPS;
+}

src/lib/game/utils/floor-utils.ts

@@ -0,0 +1,16 @@
+// ─── Floor Helpers ────────────────────────────────────────────────────────────
+
+import { GUARDIANS, FLOOR_ELEM_CYCLE } from '../constants';
+
+export function getFloorMaxHP(floor: number): number {
+  if (GUARDIANS[floor]) return GUARDIANS[floor].hp;
+  // Improved scaling: slower early game, faster late game
+  const baseHP = 100;
+  const floorScaling = floor * 50;
+  const exponentialScaling = Math.pow(floor, 1.7);
+  return Math.floor(baseHP + floorScaling + exponentialScaling);
+}
+
+export function getFloorElement(floor: number): string {
+  return FLOOR_ELEM_CYCLE[(floor - 1) % FLOOR_ELEM_CYCLE.length];
+}

src/lib/game/utils/formatting.ts

@@ -0,0 +1,13 @@
+// ─── Formatting Functions ─────────────────────────────────────────────────────
+
+export function fmt(n: number): string {
+  if (!isFinite(n) || isNaN(n)) return '0';
+  if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B';
+  if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K';
+  return Math.floor(n).toString();
+}
+
+export function fmtDec(n: number, d: number = 1): string {
+  return isFinite(n) ? n.toFixed(d) : '0';
+}

src/lib/game/utils/index.ts

@@ -0,0 +1,24 @@
+// ─── Game Utilities - Barrel Export ──────────────────────────────────────────
+
+// Re-export everything from the focused modules
+export { fmt, fmtDec } from './formatting';
+export { getFloorMaxHP, getFloorElement } from './floor-utils';
+export { 
+  computeMaxMana, 
+  computeElementMax, 
+  computeRegen, 
+  computeEffectiveRegen, 
+  computeClickMana, 
+  getMeditationBonus 
+} from './mana-utils';
+export { 
+  getElementalBonus, 
+  getBoonBonuses, 
+  calcDamage, 
+  calcInsight, 
+  getIncursionStrength, 
+  canAffordSpellCost, 
+  deductSpellCost,
+  getActiveEquipmentSpells,
+  getTotalDPS
+} from './combat-utils';

src/lib/game/utils/mana-utils.ts

@@ -0,0 +1,116 @@
+// ─── Mana & Regen Utilities ──────────────────────────────────────────────────
+
+import type { GameState } from '../types';
+import type { ComputedEffects } from '../upgrade-effects';
+import { HOURS_PER_TICK } from '../constants';
+
+export function computeMaxMana(
+  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers'>,
+  effects?: ComputedEffects
+): number {
+  const pu = state.prestigeUpgrades;
+  const base = 
+    100 +
+    (state.skills.manaWell || 0) * 100 +
+    (pu.manaWell || 0) * 500;
+  
+  // Apply upgrade effects if provided
+  if (effects) {
+    return Math.floor((base + effects.maxManaBonus) * effects.maxManaMultiplier);
+  }
+  return base;
+}
+
+export function computeElementMax(
+  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers'>,
+  effects?: ComputedEffects
+): number {
+  const pu = state.prestigeUpgrades;
+  const base = 10 + (state.skills.elemAttune || 0) * 50 + (pu.elementalAttune || 0) * 25;
+  
+  // Apply upgrade effects if provided
+  if (effects) {
+    return Math.floor((base + effects.elementCapBonus) * effects.elementCapMultiplier);
+  }
+  return base;
+}
+
+export function computeRegen(
+  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'skillUpgrades' | 'skillTiers'>,
+  effects?: ComputedEffects
+): number {
+  const pu = state.prestigeUpgrades;
+  const temporalBonus = 1 + (pu.temporalEcho || 0) * 0.1;
+  const base =
+    2 +
+    (state.skills.manaFlow || 0) * 1 +
+    (state.skills.manaSpring || 0) * 2 +
+    (pu.manaFlow || 0) * 0.5;
+  
+  let regen = base * temporalBonus;
+  
+  // Apply upgrade effects if provided
+  if (effects) {
+    regen = (regen + effects.regenBonus + effects.permanentRegenBonus) * effects.regenMultiplier;
+  }
+  
+  return regen;
+}
+
+/**
+ * Compute regen with dynamic special effects (needs current mana, max mana, incursion)
+ */
+export function computeEffectiveRegen(
+  state: Pick<GameState, 'skills' | 'prestigeUpgrades' | 'rawMana' | 'incursionStrength' | 'skillUpgrades' | 'skillTiers'>,
+  effects?: ComputedEffects
+): number {
+  // Base regen from existing function
+  let regen = computeRegen(state, effects);
+  
+  const incursionStrength = state.incursionStrength || 0;
+  
+  // Apply incursion penalty
+  regen *= (1 - incursionStrength);
+  
+  return regen;
+}
+
+export function computeClickMana(state: Pick<GameState, 'skills'>): number {
+  return (
+    1 +
+    (state.skills.manaTap || 0) * 1 +
+    (state.skills.manaSurge || 0) * 3
+  );
+}
+
+// Meditation bonus now affects regen rate directly
+export function getMeditationBonus(meditateTicks: number, skills: Record<string, number>, meditationEfficiency: number = 1): number {
+  const hasMeditation = skills.meditation === 1;
+  const hasDeepTrance = skills.deepTrance === 1;
+  const hasVoidMeditation = skills.voidMeditation === 1;
+  
+  const hours = meditateTicks * HOURS_PER_TICK;
+  
+  // Base meditation: ramps up over 4 hours to 1.5x
+  let bonus = 1 + Math.min(hours / 4, 0.5);
+  
+  // With Meditation Focus: up to 2.5x after 4 hours
+  if (hasMeditation && hours >= 4) {
+    bonus = 2.5;
+  }
+  
+  // With Deep Trance: up to 3.0x after 6 hours
+  if (hasDeepTrance && hours >= 6) {
+    bonus = 3.0;
+  }
+  
+  // With Void Meditation: up to 5.0x after 8 hours
+  if (hasVoidMeditation && hours >= 8) {
+    bonus = 5.0;
+  }
+  
+  // Apply meditation efficiency from upgrades (Deep Wellspring, etc.)
+  bonus *= meditationEfficiency;
+  
+  return bonus;
+}