fix: update StatsTab, DebugTab and all child components to use modular stores

- Updated StatsTab to use hooks directly (useSkillStore, usePrestigeStore, etc.) - Updated DebugTab to use hooks directly - Updated all debug child components (GameStateDebug, SkillDebug, AttunementDebug, etc.) - Updated all stats child components (ManaStatsSection, CombatStatsSection, etc.) - Fixed UpgradeEffectsSection.tsx syntax errors - Updated page.tsx to not pass store prop to StatsTab and DebugTab - All components now use modular stores directly instead of receiving store prop
2026-05-02 23:43:49 +02:00
parent f1499046b5
commit ca07719456
14 changed files with 387 additions and 338 deletions
@@ -233,13 +233,13 @@ export default function ManaLoopGame() {

              <TabsContent value="stats">
                <Suspense fallback={<TabLoadingFallback />}>
-                  <StatsTab store={store} />
+                  <StatsTab />
                </Suspense>
              </TabsContent>

              <TabsContent value="debug">
                <Suspense fallback={<TabLoadingFallback />}>
-                  <DebugTab store={store} />
+                  <DebugTab />
                </Suspense>
              </TabsContent>

@@ -2,25 +2,22 @@

 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
 import { Sparkles, Unlock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { ATTUNEMENTS_DEF } from '@/lib/game/data/attunements';
+import { useGameStore } from '@/lib/game/store';

-interface AttunementDebugProps {
-  store: GameStore;
-}
+export function AttunementDebug() {
+  const store = useGameStore((s) => s);
  
-export function AttunementDebug({ store }: AttunementDebugProps) {
  const handleUnlockAttunement = (id: string) => {
-    // Debug action to unlock attunements
-    if (store.debugUnlockAttunement) {
-      store.debugUnlockAttunement(id);
+    if (useGameStore.getState().debugUnlockAttunement) {
+      useGameStore.getState().debugUnlockAttunement(id);
    }
  };
  
  const handleAddAttunementXP = (id: string, amount: number) => {
-    if (store.debugAddAttunementXP) {
-      store.debugAddAttunementXP(id, amount);
+    if (useGameStore.getState().debugAddAttunementXP) {
+      useGameStore.getState().debugAddAttunementXP(id, amount);
    }
  };
  
@@ -49,34 +46,21 @@ export function AttunementDebug({ store }: AttunementDebugProps) {
                  )}
                </div>
              </div>
-              <div className="flex gap-1">
-                {!isActive && (
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    onClick={() => handleUnlockAttunement(id)}
-                  >
-                    <Unlock className="w-3 h-3" />
-                  </Button>
-                )}
-                {isActive && (
-                  <>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 50)}
-                    >
-                      +50 XP
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleAddAttunementXP(id, 500)}
-                    >
-                      +500 XP
-                    </Button>
-                  </>
-                )}
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleUnlockAttunement(id)}
+                >
+                  <Unlock className="w-3 h-3 mr-1" /> Unlock
+                </Button>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => handleAddAttunementXP(id, 100)}
+                >
+                  +100 XP
+                </Button>
              </div>
            </div>
          );
@@ -2,26 +2,19 @@

 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { ELEMENTS } from '@/lib/game/constants';
 import { Star, Lock } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { useGameStore } from '@/lib/game/store';

-interface ElementDebugProps {
-  store: GameStore;
-}
+export function ElementDebug() {
+  const store = useGameStore((s) => s);
  
-export function ElementDebug({ store }: ElementDebugProps) {
  const handleUnlockElement = (element: string) => {
-    store.unlockElement(element);
+    useGameStore.getState().unlockElement(element);
  };
  
  const handleAddElementalMana = (element: string, amount: number) => {
-    const elem = store.elements[element];
-    if (elem?.unlocked) {
-      // Add directly to element pool - need to implement in store
-      if (store.debugAddElementalMana) {
-        store.debugAddElementalMana(element, amount);
-      }
+    if (useGameStore.getState().debugAddElementalMana) {
+      useGameStore.getState().debugAddElementalMana(element, amount);
    }
  };
  
@@ -35,47 +28,41 @@ export function ElementDebug({ store }: ElementDebugProps) {
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
-          {Object.entries(ELEMENTS).map(([id, def]) => {
-            const elem = store.elements[id];
-            const isUnlocked = elem?.unlocked;
-            
+          {Object.entries(store.elements).map(([id, elem]) => {
+            const def = ELEMENTS[id];
            return (
              <div 
                key={id}
-                className={`p-2 rounded border ${
-                  isUnlocked ? 'border-gray-600' : 'border-gray-800 opacity-60'
+                className={`p-2 rounded border text-center ${
+                  elem.unlocked ? 'border-gray-600 bg-gray-800/50' : 'border-gray-800 opacity-60'
                }`}
                style={{ 
-                  borderColor: isUnlocked ? def.color : undefined 
+                  borderColor: elem.unlocked ? def?.color : undefined 
                }}
              >
-                <div className="flex items-center justify-between mb-1">
-                  <span style={{ color: def.color }}>{def.sym}</span>
-                  {!isUnlocked && (
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-5 w-5 p-0"
-                      onClick={() => handleUnlockElement(id)}
-                    >
-                      <Lock className="w-3 h-3" />
-                    </Button>
-                  )}
+                <div className="text-lg">{def?.sym}</div>
+                <div className="text-xs text-gray-400">{def?.name}</div>
+                <div className="text-xs text-gray-300 mt-1">
+                  {elem.current}/{elem.max}
                </div>
-                <div className="text-xs" style={{ color: def.color }}>{def.name}</div>
-                {isUnlocked && (
-                  <div className="text-xs text-gray-400 mt-1">
-                    {elem.current.toFixed(0)}/{elem.max}
-                  </div>
-                )}
-                {isUnlocked && (
+                {!elem.unlocked && (
                  <Button
                    size="sm"
-                    variant="ghost"
-                    className="h-5 w-full mt-1 text-xs"
-                    onClick={() => handleAddElementalMana(id, 100)}
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleUnlockElement(id)}
                  >
-                    +100
+                    <Unlock className="w-3 h-3 mr-1" /> Unlock
+                  </Button>
+                )}
+                {elem.unlocked && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="mt-2"
+                    onClick={() => handleAddElementalMana(id, 10)}
+                  >
+                    +10
                  </Button>
                )}
              </div>
@@ -8,23 +8,20 @@ import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { 
  RotateCcw, AlertTriangle, Zap, Clock, Settings, Eye,
-  Plus
 } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
-import { fmt } from '@/lib/game/store';
 import { useDebug } from '@/lib/game/debug-context';
+import { useGameStore } from '@/lib/game/store';

-interface GameStateDebugProps {
-  store: GameStore;
-}
-
-export function GameStateDebug({ store }: GameStateDebugProps) {
+export function GameStateDebug() {
  const [confirmReset, setConfirmReset] = useState(false);
  const { showComponentNames, toggleComponentNames } = useDebug();
  
+  // Get state from store
+  const store = useGameStore((s) => s);
+  
  const handleReset = () => {
    if (confirmReset) {
-      store.resetGame();
+      useGameStore.getState().resetGame();
      setConfirmReset(false);
    } else {
      setConfirmReset(true);
@@ -34,14 +31,16 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
  
  const handleAddMana = (amount: number) => {
    // Use gatherMana multiple times to add mana
+    const state = useGameStore.getState();
    for (let i = 0; i < amount; i++) {
-      store.gatherMana();
+      state.gatherMana();
    }
  };
  
  const handleSetTime = (day: number, hour: number) => {
-    if (store.debugSetTime) {
-      store.debugSetTime(day, hour);
+    const state = useGameStore.getState();
+    if (state.debugSetTime) {
+      state.debugSetTime(day, hour);
    }
  };
  
@@ -127,20 +126,20 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
          </CardHeader>
          <CardContent className="space-y-3">
            <div className="text-xs text-gray-400 mb-2">
-              Current: {fmt(store.rawMana)} / {fmt(store.getMaxMana())}
+              Current: {store.rawMana} / {store.getMaxMana?.() || '?'}
            </div>
            <div className="flex gap-2 flex-wrap">
              <Button size="sm" variant="outline" onClick={() => handleAddMana(10)}>
-                <Plus className="w-3 h-3 mr-1" /> +10
+                <Zap className="w-3 h-3 mr-1" /> +10
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleAddMana(100)}>
-                <Plus className="w-3 h-3 mr-1" /> +100
+                <Zap className="w-3 h-3 mr-1" /> +100
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleAddMana(1000)}>
-                <Plus className="w-3 h-3 mr-1" /> +1K
+                <Zap className="w-3 h-3 mr-1" /> +1K
              </Button>
              <Button size="sm" variant="outline" onClick={() => handleAddMana(10000)}>
-                <Plus className="w-3 h-3 mr-1" /> +10K
+                <Zap className="w-3 h-3 mr-1" /> +10K
              </Button>
            </div>
            <Separator className="bg-gray-700" />
@@ -149,7 +148,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
              size="sm" 
              className="w-full bg-blue-600 hover:bg-blue-700"
              onClick={() => {
-                const max = store.getMaxMana();
+                const max = store.getMaxMana?.() || 100;
                const current = store.rawMana;
                for (let i = 0; i < Math.floor(max - current); i++) {
                  store.gatherMana();
@@ -192,7 +191,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
              <Button 
                size="sm" 
                variant="outline"
-                onClick={() => store.togglePause()}
+                onClick={() => useGameStore.getState().togglePause()}
              >
                {store.paused ? '▶ Resume' : '⏸ Pause'}
              </Button>
@@ -217,7 +216,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                  // Unlock all base elements
                  ['fire', 'water', 'air', 'earth', 'light', 'dark', 'death'].forEach(e => {
                    if (!store.elements[e]?.unlocked) {
-                      store.unlockElement(e);
+                      useGameStore.getState().unlockElement(e);
                    }
                  });
                }}
@@ -228,10 +227,10 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                size="sm"
                variant="outline"
                onClick={() => {
-                  // Unlock utility elements (only transference remains)
+                  // Unlock utility elements
                  ['transference'].forEach(e => {
                    if (!store.elements[e]?.unlocked) {
-                      store.unlockElement(e);
+                      useGameStore.getState().unlockElement(e);
                    }
                  });
                }}
@@ -244,7 +243,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                onClick={() => {
                  // Max floor
                  if (store.debugSetFloor) {
-                    store.debugSetFloor(100);
+                    useGameStore.getState().debugSetFloor(100);
                  }
                }}
              >
@@ -256,7 +255,7 @@ export function GameStateDebug({ store }: GameStateDebugProps) {
                onClick={() => {
                  // Reset floor HP
                  if (store.resetFloorHP) {
-                    store.resetFloorHP();
+                    useGameStore.getState().resetFloorHP();
                  }
                }}
              >
@@ -2,13 +2,8 @@

 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Bug } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';

-interface GolemDebugProps {
-  store: GameStore;
-}
-
-export function GolemDebug({ store }: GolemDebugProps) {
+export function GolemDebug() {
  return (
    <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
      <CardHeader className="pb-2">
@@ -4,13 +4,11 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { BookOpen } from 'lucide-react';
-import type { GameStore } from '@/lib/game/store';
+import { useGameStore } from '@/lib/game/store';

-interface SkillDebugProps {
-  store: GameStore;
-}
+export function SkillDebug() {
+  const store = useGameStore((s) => s);
  
-export function SkillDebug({ store }: SkillDebugProps) {
  return (
    <Card className="bg-gray-900/80 border-gray-700 md:col-span-2">
      <CardHeader className="pb-2">
@@ -32,11 +30,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                  // Level up all enchanting skills by 1
                  const enchantSkills = ['enchanting', 'efficientEnchant', 'enchantSpeed','essenceRefining'];
                  enchantSkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
+                    // Force update
+                    useGameStore.setState({ skills: { ...store.skills } });
                  });
                }}
              >
@@ -51,6 +47,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                  enchantSkills.forEach(skillId => {
                    store.skills[skillId] = 10;
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                Max All Enchanting
@@ -68,12 +65,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                onClick={() => {
                  const manaSkills = ['manaWell', 'manaFlow', 'manaOverflow', 'fireManaCap', 'waterManaCap', 'airManaCap', 'earthManaCap', 'lightManaCap', 'darkManaCap', 'deathManaCap', 'metalManaCap', 'sandManaCap', 'lightningManaCap', 'transferenceManaCap'];
                  manaSkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                +1 All Mana
@@ -86,6 +80,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                  manaSkills.forEach(skillId => {
                    store.skills[skillId] = 10;
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                Max All Mana
@@ -103,12 +98,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                onClick={() => {
                  const studySkills = ['quickLearner', 'focusedMind', 'meditation', 'knowledgeRetention'];
                  studySkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                +1 All Study
@@ -121,6 +113,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                  studySkills.forEach(skillId => {
                    store.skills[skillId] = 10;
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                Max All Study
@@ -138,12 +131,9 @@ export function SkillDebug({ store }: SkillDebugProps) {
                onClick={() => {
                  const craftSkills = ['effCrafting', 'fieldRepair', 'elemCrafting'];
                  craftSkills.forEach(skillId => {
-                    if (store.skills[skillId] !== undefined) {
-                      store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
-                    } else {
-                      store.skills[skillId] = 1;
-                    }
+                    store.skills[skillId] = Math.min((store.skills[skillId] || 0) + 1, 10);
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                +1 All Crafting
@@ -156,6 +146,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                  craftSkills.forEach(skillId => {
                    store.skills[skillId] = 10;
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                Max All Crafting
@@ -179,12 +170,13 @@ export function SkillDebug({ store }: SkillDebugProps) {
                    'researchAdvancedFire', 'researchAdvancedWater', 'researchAdvancedAir', 
                    'researchAdvancedEarth', 'researchAdvancedLight', 'researchAdvancedDark',
                    'researchMasterFire', 'researchMasterWater', 'researchMasterEarth', 
-                    'researchDamageEffects', 'researchCombatEffects',
-                    'researchManaEffects', 'researchAdvancedManaEffects', 'researchUtilityEffects'
+                    'researchDamageEffects', 'researchCombatEffects', 'researchManaEffects', 
+                    'researchAdvancedManaEffects', 'researchUtilityEffects'
                  ];
                  researchSkills.forEach(skillId => {
                    store.skills[skillId] = 1;
                  });
+                  useGameStore.setState({ skills: { ...store.skills } });
                }}
              >
                Unlock All Research
@@ -194,9 +186,7 @@ export function SkillDebug({ store }: SkillDebugProps) {
                variant="outline"
                onClick={() => {
                  // Add all unlocked effects to unlockedEffects
-                  const effectIds = Object.keys(store.unlockedEffects || {});
-                  // Add spell effects, mana effects, combat effects, utility effects
-                  const allEffectIds = [
+                  const effectIds = [
                    // Spell effects
                    'spell_manaBolt', 'spell_manaStrike', 'spell_fireball', 'spell_emberShot',
                    'spell_waterJet', 'spell_iceShard', 'spell_gust', 'spell_windSlash',
@@ -229,11 +219,13 @@ export function SkillDebug({ store }: SkillDebugProps) {
                    // Sword enchants
                    'sword_fire', 'sword_frost', 'sword_lightning', 'sword_void'
                  ];
-                  allEffectIds.forEach(id => {
-                    if (!store.unlockedEffects.includes(id)) {
-                      store.unlockedEffects.push(id);
+                  const currentEffects = store.unlockedEffects || [];
+                  effectIds.forEach(id => {
+                    if (!currentEffects.includes(id)) {
+                      currentEffects.push(id);
                    }
                  });
+                  useGameStore.setState({ unlockedEffects: currentEffects });
                }}
              >
                Unlock All Effects
@@ -260,27 +252,22 @@ export function SkillDebug({ store }: SkillDebugProps) {
                  'spell_manaBolt', 'spell_manaStrike', 'spell_fireball', 'spell_emberShot',
                  'spell_waterJet', 'spell_iceShard', 'spell_gust', 'spell_windSlash',
                  'spell_stoneBullet', 'spell_rockSpike', 'spell_lightLance', 'spell_radiance',
-                  'spell_shadowBolt', 'spell_darkPulse', 'spell_drain', 'spell_inferno',
-                  'spell_flameWave', 'spell_tidalWave', 'spell_iceStorm', 'spell_hurricane',
-                  'spell_windBlade', 'spell_earthquake', 'spell_stoneBarrage', 'spell_solarFlare',
-                  'spell_divineSmite', 'spell_voidRift', 'spell_shadowStorm', 'spell_pyroclasm',
-                  'spell_tsunami', 'spell_meteorStrike', 'spell_spark', 'spell_lightningBolt',
-                  'spell_chainLightning', 'spell_stormCall', 'spell_thunderStrike', 'spell_metalShard',
-                  'spell_ironFist', 'spell_steelTempest', 'spell_furnaceBlast', 'spell_sandBlast',
-                  'spell_sandstorm', 'spell_desertWind', 'spell_duneCollapse',
+                  'spell_shadowBolt', 'spell_darkPulse', 'spell_drain',
                  'mana_cap_50', 'mana_cap_100', 'mana_regen_1', 'mana_regen_2', 'mana_regen_5',
                  'click_mana_1', 'click_mana_3', 'damage_5', 'damage_10', 'damage_pct_10',
                  'crit_5', 'attack_speed_10', 'meditate_10', 'study_10', 'insight_5',
-                  'spell_echo_10', 'guardian_dmg_10', 'overpower_80',
-                  'weapon_mana_cap_20', 'weapon_mana_cap_50', 'weapon_mana_cap_100',
-                  'weapon_mana_regen_1', 'weapon_mana_regen_2', 'weapon_mana_regen_5',
-                  'sword_fire', 'sword_frost', 'sword_lightning', 'sword_void'
+                  'spell_echo_10', 'guardian_dmg_10', 'overpower_80'
                ];
+                const currentEffects = store.unlockedEffects || [];
                allEffectIds.forEach(id => {
-                  if (!store.unlockedEffects.includes(id)) {
-                    store.unlockedEffects.push(id);
+                  if (!currentEffects.includes(id)) {
+                    currentEffects.push(id);
                  }
                });
+                useGameStore.setState({ 
+                  skills: { ...store.skills },
+                  unlockedEffects: currentEffects 
+                });
              }}
            >
              🚀 Max Everything
@@ -1,20 +1,21 @@
 'use client';

-import { GUARDIANS } from '@/lib/game/constants';
-import { fmtDec } from '@/lib/game/store';
-import type { GameStore } from '@/lib/game/types';
+import { fmtDec } from '@/lib/game/stores';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Swords } from 'lucide-react';

-export interface CombatStatsSectionProps {
-  store: GameStore;
-}
+// Modular stores
+import { useSkillStore, useCombatStore } from '@/lib/game/stores';
+
+export function CombatStatsSection() {
+  // Get state from modular stores
+  const skills = useSkillStore((s) => s.skills);
+  const signedPacts = useCombatStore((s) => s.signedPacts);

-export function CombatStatsSection({ store }: CombatStatsSectionProps) {
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
-        <CardTitle className="text-red-400 game-panel-title text-xs flex items-center gap-2">
+        <CardTitle className="text-red-400 text-sm flex items-center gap-2">
          <Swords className="w-4 h-4" />
          Combat Stats
        </CardTitle>
@@ -24,25 +25,25 @@ export function CombatStatsSection({ store }: CombatStatsSectionProps) {
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Combat Training Bonus:</span>
-              <span className="text-red-300">+{(store.skills.combatTrain || 0) * 5}</span>
+              <span className="text-red-300">+{(skills.combatTrain || 0) * 5}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Arcane Fury Multiplier:</span>
-              <span className="text-red-300">×{fmtDec(1 + (store.skills.arcaneFury || 0) * 0.1, 2)}</span>
+              <span className="text-red-300">×{fmtDec(1 + (skills.arcaneFury || 0) * 0.1, 2)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Elemental Mastery:</span>
-              <span className="text-red-300">×{fmtDec(1 + (store.skills.elementalMastery || 0) * 0.15, 2)}</span>
+              <span className="text-red-300">×{fmtDec(1 + (skills.elementalMastery || 0) * 0.15, 2)}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Guardian Bane:</span>
-              <span className="text-red-300">×{fmtDec(1 + (store.skills.guardianBane || 0) * 0.2, 2)} (vs guardians)</span>
+              <span className="text-red-300">×{fmtDec(1 + (skills.guardianBane || 0) * 0.2, 2)} (vs guardians)</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Critical Hit Chance:</span>
-              <span className="text-amber-300">{((store.skills.precision || 0) * 5)}%</span>
+              <span className="text-amber-300">{(skills.precision || 0) * 5}%</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Critical Multiplier:</span>
@@ -50,11 +51,10 @@ export function CombatStatsSection({ store }: CombatStatsSectionProps) {
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Spell Echo Chance:</span>
-              <span className="text-amber-300">{((store.skills.spellEcho || 0) * 10)}%</span>
+              <span className="text-amber-300">{(skills.spellEcho || 0) * 10}%</span>
            </div>
            <div className="flex justify-between text-sm">
-              <span className="text-gray-400">Pact Multiplier:</span>
-              <span className="text-amber-300">×{fmtDec(store.signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
+              <span className="text-amber-300">×{fmtDec(signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
            </div>
          </div>
        </div>
@@ -2,14 +2,16 @@

 import { getTierMultiplier } from '@/lib/game/skill-evolution';
 import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
-import { fmt, fmtDec } from '@/lib/game/store';
-import type { GameStore, UnifiedEffects } from '@/lib/game/types';
+import { fmt, fmtDec } from '@/lib/game/stores';
+import type { UnifiedEffects } from '@/lib/game/types';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { Droplet } from 'lucide-react';

+// Modular stores
+import { useSkillStore, usePrestigeStore, useManaStore } from '@/lib/game/stores';
+
 export interface ManaStatsSectionProps {
-  store: GameStore;
  upgradeEffects: UnifiedEffects;
  maxMana: number;
  baseRegen: number;
@@ -26,7 +28,6 @@ export interface ManaStatsSectionProps {
 }

 export function ManaStatsSection({
-  store,
  upgradeEffects,
  maxMana,
  baseRegen,
@@ -41,6 +42,12 @@ export function ManaStatsSection({
  hasManaOverflow,
  hasEternalFlow,
 }: ManaStatsSectionProps) {
+  // Get state from modular stores
+  const skills = useSkillStore((s) => s.skills);
+  const skillTiers = useSkillStore((s) => s.skillTiers);
+  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
+  const rawMana = useManaStore((s) => s.rawMana);
+
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
@@ -60,9 +67,9 @@ export function ManaStatsSection({
              <span className="text-gray-400">Mana Well Bonus:</span>
              <span className="text-blue-300">
                {(() => {
-                  const mw = store.skillTiers?.manaWell || 1;
+                  const mw = skillTiers?.manaWell || 1;
                  const tieredSkillId = mw > 1 ? `manaWell_t${mw}` : 'manaWell';
-                  const level = store.skills[tieredSkillId] || store.skills.manaWell || 0;
+                  const level = skills[tieredSkillId] || skills.manaWell || 0;
                  const tierMult = getTierMultiplier(tieredSkillId);
                  return `+${fmt(level * 100 * tierMult)} (${level} lvl × 100 × ${tierMult}x tier)`;
                })()}
@@ -70,7 +77,7 @@ export function ManaStatsSection({
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Prestige Mana Well:</span>
-              <span className="text-blue-300">+{fmt((store.prestigeUpgrades.manaWell || 0) * 500)}</span>
+              <span className="text-blue-300">+{fmt((prestigeUpgrades.manaWell || 0) * 500)}</span>
            </div>
            {upgradeEffects.maxManaBonus > 0 && (
              <div className="flex justify-between text-sm">
@@ -98,9 +105,9 @@ export function ManaStatsSection({
              <span className="text-gray-400">Mana Flow Bonus:</span>
              <span className="text-blue-300">
                {(() => {
-                  const mf = store.skillTiers?.manaFlow || 1;
+                  const mf = skillTiers?.manaFlow || 1;
                  const tieredSkillId = mf > 1 ? `manaFlow_t${mf}` : 'manaFlow';
-                  const level = store.skills[tieredSkillId] || store.skills.manaFlow || 0;
+                  const level = skills[tieredSkillId] || skills.manaFlow || 0;
                  const tierMult = getTierMultiplier(tieredSkillId);
                  return `+${fmtDec(level * 1 * tierMult)}/hr (${level} lvl × 1 × ${tierMult}x tier)`;
                })()}
@@ -108,15 +115,15 @@ export function ManaStatsSection({
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Mana Spring Bonus:</span>
-              <span className="text-blue-300">+{(store.skills.manaSpring || 0) * 2}/hr</span>
+              <span className="text-blue-300">+{(skills.manaSpring || 0) * 2}/hr</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Prestige Mana Flow:</span>
-              <span className="text-blue-300">+{fmtDec((store.prestigeUpgrades.manaFlow || 0) * 0.5)}/hr</span>
+              <span className="text-blue-300">+{fmtDec((prestigeUpgrades.manaFlow || 0) * 0.5)}/hr</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Temporal Echo:</span>
-              <span className="text-blue-300">×{fmtDec(1 + (store.prestigeUpgrades.temporalEcho || 0) * 0.1, 2)}</span>
+              <span className="text-blue-300">×{fmtDec(1 + (prestigeUpgrades.temporalEcho || 0) * 0.1, 2)}</span>
            </div>
            <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2">
              <span className="text-gray-300">Base Regen:</span>
@@ -167,26 +174,28 @@ export function ManaStatsSection({
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Mana Tap Bonus:</span>
-              <span className="text-purple-300">+{store.skills.manaTap || 0}</span>
+              <span className="text-purple-300">+{skills.manaTap || 0}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Mana Surge Bonus:</span>
-              <span className="text-purple-300">+{(store.skills.manaSurge || 0) * 3}</span>
+              <span className="text-purple-300">+{(skills.manaSurge || 0) * 3}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Mana Overflow:</span>
-              <span className="text-purple-300">×{fmtDec(1 + (store.skills.manaOverflow || 0) * 0.25, 2)}</span>
+              <span className="text-purple-300">×{fmtDec(1 + (skills.manaOverflow || 0) * 0.25, 2)}</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
-              <span className="text-gray-400">Meditation Multiplier:</span>
+              <span className={`font-semibold ${meditationMultiplier > 1.5 ? 'text-purple-400' : 'text-gray-300'}`}>
+                Meditation Multiplier:
+              </span>
              <span className={`font-semibold ${meditationMultiplier > 1.5 ? 'text-purple-400' : 'text-gray-300'}`}>
                {fmtDec(meditationMultiplier, 2)}x
              </span>
            </div>
            <div className="flex justify-between text-sm">
-              <span className="text-gray-400">Effective Regen:</span>
+              <span className="text-gray-300">Effective Regen:</span>
              <span className="text-green-400 font-semibold">{fmtDec(effectiveRegen, 2)}/hr</span>
            </div>
            {incursionStrength > 0 && !hasSpecial(upgradeEffects, SPECIAL_EFFECTS.STEADY_STREAM) && (
@@ -237,13 +246,13 @@ export function ManaStatsSection({
                <span className="text-green-400">Regen immune to ALL penalties</span>
              </div>
            )}
-            {hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_TORRENT) && store.rawMana > maxMana * 0.75 && (
+            {hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_TORRENT) && rawMana > maxMana * 0.75 && (
              <div className="flex justify-between text-sm">
                <span className="text-cyan-400">Mana Torrent:</span>
                <span className="text-cyan-400">+50% regen (high mana)</span>
              </div>
            )}
-            {hasSpecial(upgradeEffects, SPECIAL_EFFECTS.DESPERATE_WELLS) && store.rawMana < maxMana * 0.25 && (
+            {hasSpecial(upgradeEffects, SPECIAL_EFFECTS.DESPERATE_WELLS) && rawMana < maxMana * 0.25 && (
              <div className="flex justify-between text-sm">
                <span className="text-cyan-400">Desperate Wells:</span>
                <span className="text-cyan-400">+50% regen (low mana)</span>
@@ -1,37 +1,68 @@
 'use client';

 import { ELEMENTS } from '@/lib/game/constants';
-import { fmt, fmtDec } from '@/lib/game/store';
-import type { GameStore } from '@/lib/game/types';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { fmt, fmtDec } from '@/lib/game/stores';
 import { ATTUNEMENTS_DEF, getAttunementConversionRate } from '@/lib/game/data/attunements';
-import { computeMaxMana, computeElementMax } from '@/lib/game/store';
+import { computeMaxMana, computeElementMax } from '@/lib/game/stores';
 import { computeEffectiveRegenForDisplay } from '@/lib/game/store-modules/computed-stats';
 import { getUnifiedEffects } from '@/lib/game/effects';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Droplet } from 'lucide-react';
 import { Separator } from '@/components/ui/separator';

-export interface ManaTypeBreakdownProps {
-  store: GameStore;
-}
+// Modular stores
+import { useCombatStore, useManaStore, useSkillStore, usePrestigeStore } from '@/lib/game/stores';
+
+export function ManaTypeBreakdown() {
+  // Get state from modular stores
+  const skills = useSkillStore((s) => s.skills);
+  const skillTiers = useSkillStore((s) => s.skillTiers);
+  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+  
+  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
+  const elements = useManaStore((s) => s.elements);
+  const rawMana = useManaStore((s) => s.rawMana);
+  const attunements = useCombatStore((s) => s.attunements);
  
-export function ManaTypeBreakdown({ store }: ManaTypeBreakdownProps) {
  // Compute unified effects for regen calculations
-  const effects = getUnifiedEffects(store);
+  const effects = getUnifiedEffects({ 
+    skillUpgrades, 
+    skillTiers, 
+    equippedInstances: {}, 
+    equipmentInstances: {} 
+  });
  
  // Get effective regen info for raw mana
-  const regenInfo = computeEffectiveRegenForDisplay(store, effects);
+  const regenInfo = computeEffectiveRegenForDisplay({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers, 
+    elements, 
+    rawMana, 
+    attunements 
+  } as any, effects);
  
  // Compute max mana
-  const maxMana = computeMaxMana(store, effects);
+  const maxMana = computeMaxMana({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers 
+  }, effects);
  
  // Get unlocked elements sorted by category then name
-  const unlockedElements = Object.entries(store.elements)
+  const unlockedElements = Object.entries(elements)
    .filter(([, state]) => state.unlocked)
    .map(([id, state]) => {
      const def = ELEMENTS[id];
      if (!def) return null;
-      const elemMax = computeElementMax(store, effects, id);
+      const elemMax = computeElementMax({ 
+        skills, 
+        prestigeUpgrades, 
+        skillUpgrades, 
+        skillTiers 
+      } as any, effects, id);
      return { 
        id, 
        name: def.name, 
@@ -69,7 +100,7 @@ export function ManaTypeBreakdown({ store }: ManaTypeBreakdownProps) {
                <span className="text-xs text-gray-500">(base)</span>
              </div>
              <div className="text-sm">
-                <span className="text-gray-300">{fmt(store.rawMana)}</span>
+                <span className="text-gray-300">{fmt(rawMana)}</span>
                <span className="text-gray-500"> / </span>
                <span className="text-gray-400">{fmt(maxMana)}</span>
              </div>
@@ -79,7 +110,7 @@ export function ManaTypeBreakdown({ store }: ManaTypeBreakdownProps) {
            <div className="w-full bg-gray-700 rounded-full h-2 mb-3">
              <div 
                className="h-2 rounded-full transition-all duration-300 bg-purple-500" 
-                style={{ width: `${Math.min(100, (store.rawMana / maxMana) * 100)}%` }}
+                style={{ width: `${Math.min(100, (rawMana / maxMana) * 100)}%` }}
              />
            </div>
            
@@ -102,13 +133,15 @@ export function ManaTypeBreakdown({ store }: ManaTypeBreakdownProps) {
              </div>
              
              {/* Show conversion drains by attunement */}
-              {store.conversionDrains && Object.keys(store.conversionDrains).length > 0 && (
+              {attunements && Object.keys(attunements).length > 0 && (
                <>
                  <Separator className="bg-gray-700 my-1" />
                  <div className="text-gray-400 mb-1">Conversion Drains:</div>
-                  {Object.entries(store.conversionDrains).map(([attId, rate]) => {
+                  {Object.entries(attunements).map(([attId, attState]) => {
                    const attDef = ATTUNEMENTS_DEF[attId];
-                    if (!attDef || rate <= 0) return null;
+                    if (!attDef || attState.level === 0) return null;
+                    const rate = getAttunementConversionRate(attId, attState.level);
+                    if (rate <= 0) return null;
                    return (
                      <div key={attId} className="flex justify-between pl-2">
                        <span className="text-gray-500">{attDef.name}:</span>
@@ -128,7 +161,7 @@ export function ManaTypeBreakdown({ store }: ManaTypeBreakdownProps) {
            if (!elem) return null;
            
            // Find attunements that convert TO this element
-            const convertingAttunements = Object.entries(store.attunements || {})
+            const convertingAttunements = Object.entries(attunements || {})
              .filter(([attId, attState]) => {
                if (!attState.active) return false;
                const attDef = ATTUNEMENTS_DEF[attId];
@@ -177,7 +210,7 @@ export function ManaTypeBreakdown({ store }: ManaTypeBreakdownProps) {
                      <div className="text-gray-500 pl-2">
                        Source: {convertingAttunements.map(([attId]) => {
                          const attDef = ATTUNEMENTS_DEF[attId];
-                          const level = store.attunements[attId]?.level || 1;
+                          const level = attunements[attId]?.level || 1;
                          return `${attDef?.name} (Lv.${level})`;
                        }).join(', ')}
                      </div>
@@ -1,17 +1,22 @@
 'use client';

-import { fmtDec } from '@/lib/game/store';
-import type { GameStore } from '@/lib/game/types';
+import { fmtDec } from '@/lib/game/stores';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { BookOpen } from 'lucide-react';

+// Modular stores
+import { useSkillStore, usePrestigeStore } from '@/lib/game/stores';
+
 export interface StudyStatsSectionProps {
-  store: GameStore;
  studySpeedMult: number;
  studyCostMult: number;
 }

-export function StudyStatsSection({ store, studySpeedMult, studyCostMult }: StudyStatsSectionProps) {
+export function StudyStatsSection({ studySpeedMult, studyCostMult }: StudyStatsSectionProps) {
+  // Get state from modular stores
+  const skills = useSkillStore((s) => s.skills);
+  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
+
  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
@@ -29,7 +34,7 @@ export function StudyStatsSection({ store, studySpeedMult, studyCostMult }: Stud
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Quick Learner Bonus:</span>
-              <span className="text-purple-300">+{((store.skills.quickLearner || 0) * 10)}%</span>
+              <span className="text-purple-300">+{((skills.quickLearner || 0) * 10)}%</span>
            </div>
          </div>
          <div className="space-y-2">
@@ -39,13 +44,13 @@ export function StudyStatsSection({ store, studySpeedMult, studyCostMult }: Stud
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Focused Mind Bonus:</span>
-              <span className="text-purple-300">-{((store.skills.focusedMind || 0) * 5)}%</span>
+              <span className="text-purple-300">-{((skills.focusedMind || 0) * 5)}%</span>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-gray-400">Progress Retention:</span>
-              <span className="text-purple-300">{Math.round((1 + (store.skills.knowledgeRetention || 0) * 0.2) * 100)}%</span>
+              <span className="text-purple-300">{Math.round((1 + (skills.knowledgeRetention || 0) * 0.2) * 100)}%</span>
            </div>
          </div>
        </div>
@@ -1,44 +1,46 @@
 'use client';

-import { SKILL_EVOLUTION_PATHS, getTierMultiplier } from '@/lib/game/skill-evolution';
+import { SKILL_EVOLUTION_PATHS } from '@/lib/game/skill-evolution';
 import { SKILLS_DEF } from '@/lib/game/constants';
-import type { GameStore, SkillUpgradeChoice } from '@/lib/game/types';
+import type { SkillUpgradeChoice } from '@/lib/game/types';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Star } from 'lucide-react';

-export interface UpgradeEffectsSectionProps {
-  store: GameStore;
-}
+// Modular stores
+import { useSkillStore } from '@/lib/game/stores';

-// Helper function to get all selected skill upgrades
-function getAllSelectedUpgrades(store: GameStore) {
-  const upgrades: { skillId: string; upgrade: SkillUpgradeChoice }[] = [];
-  for (const [skillId, selectedIds] of Object.entries(store.skillUpgrades)) {
-    const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
-    const path = SKILL_EVOLUTION_PATHS[baseSkillId];
-    if (!path) continue;
-    for (const tier of path.tiers) {
-      if (tier.skillId === skillId) {
-        for (const upgradeId of selectedIds) {
-          const upgrade = tier.upgrades.find(u => u.id === upgradeId);
-          if (upgrade) {
-            upgrades.push({ skillId, upgrade });
+export function UpgradeEffectsSection() {
+  // Get state from modular stores
+  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+
+  // Helper function to get all selected skill upgrades
+  function getAllSelectedUpgrades() {
+    const upgrades = [];
+    for (const [skillId, selectedIds] of Object.entries(skillUpgrades)) {
+      const baseSkillId = skillId.includes('_t') ? skillId.split('_t')[0] : skillId;
+      const path = SKILL_EVOLUTION_PATHS[baseSkillId];
+      if (!path) continue;
+      for (const tier of path.tiers) {
+        if (tier.skillId === skillId) {
+          for (const upgradeId of selectedIds) {
+            const upgrade = tier.upgrades.find(u => u.id === upgradeId);
+            if (upgrade) {
+              upgrades.push({ skillId, upgrade });
+            }
          }
        }
      }
    }
+    return upgrades;
  }
-  return upgrades;
-}

-export function UpgradeEffectsSection({ store }: UpgradeEffectsSectionProps) {
-  const selectedUpgrades = getAllSelectedUpgrades(store);
+  const selectedUpgrades = getAllSelectedUpgrades();

  return (
    <Card className="bg-gray-900/80 border-gray-700">
      <CardHeader className="pb-2">
-        <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
+        <CardTitle className="text-amber-400 text-sm flex items-center gap-2">
          <Star className="w-4 h-4" />
          Active Skill Upgrades ({selectedUpgrades.length})
        </CardTitle>
@@ -57,17 +59,17 @@ export function UpgradeEffectsSection({ store }: UpgradeEffectsSectionProps) {
                  </Badge>
                </div>
                <div className="text-xs text-gray-400 mt-1">{upgrade.desc}</div>
-                {upgrade.effect.type === 'multiplier' && (
+                {upgrade.effect && upgrade.effect.type === 'multiplier' && (
                  <div className="text-xs text-green-400 mt-1">
-                    +{Math.round((upgrade.effect.value! - 1) * 100)}% {upgrade.effect.stat}
+                    +{Math.round((upgrade.effect.value - 1) * 100)}% {upgrade.effect.stat}
                  </div>
                )}
-                {upgrade.effect.type === 'bonus' && (
+                {upgrade.effect && upgrade.effect.type === 'bonus' && (
                  <div className="text-xs text-blue-400 mt-1">
                    +{upgrade.effect.value} {upgrade.effect.stat}
                  </div>
                )}
-                {upgrade.effect.type === 'special' && (
+                {upgrade.effect && upgrade.effect.type === 'special' && (
                  <div className="text-xs text-cyan-400 mt-1">
                    ⚡ {upgrade.effect.specialDesc || 'Special effect active'}
                  </div>
@@ -1,31 +1,26 @@
 'use client';

-import type { GameStore } from '@/lib/game/store';
+import { GameStateDebug } from '@/components/game/debug/GameStateDebug';
 import { 
-  GameStateDebug, 
  SkillDebug, 
-  ElementDebug, 
  AttunementDebug, 
+  ElementDebug, 
  GolemDebug,
  PactDebug 
 } from '@/components/game/debug';

-interface DebugTabProps {
-  store: GameStore;
-}
-
-export function DebugTab({ store }: DebugTabProps) {
+export function DebugTab() {
  return (
    <div className="space-y-4">
-      <GameStateDebug store={store} />
+      <GameStateDebug />
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <AttunementDebug store={store} />
-        <ElementDebug store={store} />
+        <AttunementDebug />
+        <ElementDebug />
      </div>
      
-      <SkillDebug store={store} />
-      <GolemDebug store={store} />
+      <SkillDebug />
+      <GolemDebug />
      <PactDebug />
    </div>
  );
@@ -3,8 +3,9 @@
 import { ELEMENTS, GUARDIANS } from '@/lib/game/constants';
 import { getTierMultiplier } from '@/lib/game/skill-evolution';
 import { hasSpecial, SPECIAL_EFFECTS } from '@/lib/game/effects';
-import { fmt, fmtDec } from '@/lib/game/store';
-import type { GameStore, UnifiedEffects } from '@/lib/game/types';
+import { getUnifiedEffects } from '@/lib/game/effects';
+import { fmt, fmtDec, computeMaxMana, computeRegen, computeClickMana, getMeditationBonus, getIncursionStrength, getStudySpeedMultiplier, getStudyCostMultiplier } from '@/lib/game/stores';
+import type { UnifiedEffects } from '@/lib/game/types';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
@@ -15,57 +16,107 @@ import { CombatStatsSection } from '../stats/CombatStatsSection';
 import { StudyStatsSection } from '../stats/StudyStatsSection';
 import { UpgradeEffectsSection } from '../stats/UpgradeEffectsSection';

-export interface StatsTabProps {
-  store: GameStore;
-  upgradeEffects: UnifiedEffects;
-  maxMana: number;
-  baseRegen: number;
-  clickMana: number;
-  meditationMultiplier: number;
-  effectiveRegen: number;
-  incursionStrength: number;
-  manaCascadeBonus: number;
-  manaWaterfallBonus: number;
-  hasManaWaterfall: boolean;
-  hasFlowSurge: boolean;
-  hasManaOverflow: boolean;
-  hasEternalFlow: boolean;
-  studySpeedMult: number;
-  studyCostMult: number;
-}
+// Modular stores
+import { useCombatStore, useManaStore, useSkillStore, usePrestigeStore, useGameStore } from '@/lib/game/stores';
+
+export function StatsTab() {
+  // Get state from modular stores
+  const skills = useSkillStore((s) => s.skills);
+  const skillTiers = useSkillStore((s) => s.skillTiers);
+  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+  
+  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
+  const loopCount = usePrestigeStore((s) => s.loopCount);
+  const insight = usePrestigeStore((s) => s.insight);
+  const totalInsight = usePrestigeStore((s) => s.totalInsight);
+  const memorySlots = usePrestigeStore((s) => s.memorySlots);
+  
+  const elements = useManaStore((s) => s.elements);
+  const totalManaGathered = useManaStore((s) => s.totalManaGathered);
+  const rawMana = useManaStore((s) => s.rawMana);
+  const meditateTicks = useManaStore((s) => s.meditateTicks);
+  
+  const signedPacts = useCombatStore((s) => s.signedPacts);
+  const maxFloorReached = useCombatStore((s) => s.maxFloorReached);
+  const spells = useCombatStore((s) => s.spells);
+
+  // Compute unified effects
+  const upgradeEffects = getUnifiedEffects({ 
+    skillUpgrades, 
+    skillTiers, 
+    equippedInstances: {}, 
+    equipmentInstances: {} 
+  }) as UnifiedEffects;
+  
+  // Compute derived stats
+  const maxMana = computeMaxMana({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers 
+  }, upgradeEffects);
+  
+  const baseRegen = computeRegen({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers 
+  }, upgradeEffects);
+  
+  const clickMana = computeClickMana({ 
+    skills, 
+    prestigeUpgrades, 
+    skillUpgrades, 
+    skillTiers 
+  });
+  
+  // Get meditation multiplier
+  const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
+  
+  // Get incursion strength
+  const day = useGameStore((s) => s.day);
+  const hour = useGameStore((s) => s.hour);
+  const incursionStrength = getIncursionStrength(day, hour);
+  
+  // Effective regen with incursion penalty
+  const effectiveRegenWithSpecials = baseRegen * (1 - incursionStrength);
+  
+  // Mana Cascade bonus
+  const manaCascadeBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_CASCADE)
+    ? Math.floor(maxMana / 100) * 0.1
+    : 0;
+
+  // Mana Waterfall bonus
+  const manaWaterfallBonus = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL)
+    ? Math.floor(maxMana / 100) * 0.25
+    : 0;
+
+  // Effective regen
+  const effectiveRegen = (effectiveRegenWithSpecials + manaCascadeBonus + manaWaterfallBonus) * meditationMultiplier;
+  
+  // Get study speed/cost multipliers
+  const studySpeedMult = getStudySpeedMultiplier(skills, skillUpgrades, skillTiers);
+  const studyCostMult = getStudyCostMultiplier(skills, skillUpgrades, skillTiers);
+  
+  // Check special effects
+  const hasManaWaterfall = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_WATERFALL);
+  const hasFlowSurge = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.FLOW_SURGE);
+  const hasManaOverflow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.MANA_OVERFLOW);
+  const hasEternalFlow = hasSpecial(upgradeEffects, SPECIAL_EFFECTS.ETERNAL_FLOW);

-export function StatsTab({
-  store,
-  upgradeEffects,
-  maxMana,
-  baseRegen,
-  clickMana,
-  meditationMultiplier,
-  effectiveRegen,
-  incursionStrength,
-  manaCascadeBonus,
-  manaWaterfallBonus,
-  hasManaWaterfall,
-  hasFlowSurge,
-  hasManaOverflow,
-  hasEternalFlow,
-  studySpeedMult,
-  studyCostMult,
-}: StatsTabProps) {
  // Compute element max
  const elemMax = (() => {
-    const ea = store.skillTiers?.elemAttune || 1;
+    const ea = skillTiers?.elemAttune || 1;
    const tieredSkillId = ea > 1 ? `elemAttune_t${ea}` : 'elemAttune';
-    const level = store.skills[tieredSkillId] || store.skills.elemAttune || 0;
+    const level = skills[tieredSkillId] || skills.elemAttune || 0;
    const tierMult = getTierMultiplier(tieredSkillId);
-    return 10 + level * 50 * tierMult + (store.prestigeUpgrades.elementalAttune || 0) * 25;
+    return 10 + level * 50 * tierMult + (prestigeUpgrades.elementalAttune || 0) * 25;
  })();

  return (
    <div className="space-y-4">
      {/* Mana Stats */}
      <ManaStatsSection
-        store={store}
        upgradeEffects={upgradeEffects}
        maxMana={maxMana}
        baseRegen={baseRegen}
@@ -82,14 +133,13 @@ export function StatsTab({
      />

      {/* Mana Type Breakdown */}
-      <ManaTypeBreakdown store={store} />
+      <ManaTypeBreakdown />

      {/* Combat Stats */}
-      <CombatStatsSection store={store} />
+      <CombatStatsSection />

      {/* Study Stats */}
      <StudyStatsSection
-        store={store}
        studySpeedMult={studySpeedMult}
        studyCostMult={studyCostMult}
      />
@@ -113,9 +163,9 @@ export function StatsTab({
                <span className="text-gray-400">Elem. Attunement Bonus:</span>
                <span className="text-green-300">
                  {(() => {
-                    const ea = store.skillTiers?.elemAttune || 1;
+                    const ea = skillTiers?.elemAttune || 1;
                    const tieredSkillId = ea > 1 ? `elemAttune_t${ea}` : 'elemAttune';
-                    const level = store.skills[tieredSkillId] || store.skills.elemAttune || 0;
+                    const level = skills[tieredSkillId] || skills.elemAttune || 0;
                    const tierMult = getTierMultiplier(tieredSkillId);
                    return `+${level * 50 * tierMult}`;
                  })()}
@@ -123,24 +173,24 @@ export function StatsTab({
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-400">Prestige Attunement:</span>
-                <span className="text-green-300">+{(store.prestigeUpgrades.elementalAttune || 0) * 25}</span>
+                <span className="text-green-300">+{(prestigeUpgrades.elementalAttune || 0) * 25}</span>
              </div>
            </div>
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-gray-400">Unlocked Elements:</span>
-                <span className="text-green-300">{Object.values(store.elements).filter(e => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
+                <span className="text-green-300">{Object.values(elements).filter(e => e.unlocked).length} / {Object.keys(ELEMENTS).length}</span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-400">Elem. Crafting Bonus:</span>
-                <span className="text-green-300">×{fmtDec(1 + (store.skills.elemCrafting || 0) * 0.25, 2)}</span>
+                <span className="text-green-300">×{fmtDec(1 + (skills.elemCrafting || 0) * 0.25, 2)}</span>
              </div>
            </div>
          </div>
          <Separator className="bg-gray-700 my-3" />
          <div className="text-xs text-gray-400 mb-2">Elemental Mana Pools:</div>
          <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-2">
-            {Object.entries(store.elements)
+            {Object.entries(elements)
              .filter(([, state]) => state.unlocked)
              .map(([id, state]) => {
                const def = ELEMENTS[id];
@@ -156,9 +206,9 @@ export function StatsTab({
      </Card>

      {/* Active Upgrades */}
-      <UpgradeEffectsSection store={store} />
+      <UpgradeEffectsSection />

-      {/* Enchantment Power (placeholder for Task 5) */}
+      {/* Enchantment Power */}
      <Card className="bg-gray-900/80 border-gray-700">
        <CardHeader className="pb-2">
          <CardTitle className="text-blue-400 game-panel-title text-xs flex items-center gap-2">
@@ -183,15 +233,15 @@ export function StatsTab({
        <CardHeader className="pb-2">
          <CardTitle className="text-amber-400 game-panel-title text-xs flex items-center gap-2">
            <Trophy className="w-4 h-4" />
-            Signed Pacts ({store.signedPacts.length}/10)
+            Signed Pacts ({signedPacts.length}/10)
          </CardTitle>
        </CardHeader>
        <CardContent>
-          {store.signedPacts.length === 0 ? (
+          {signedPacts.length === 0 ? (
            <div className="text-gray-500 text-sm">No pacts signed yet. Defeat guardians to earn pacts.</div>
          ) : (
            <div className="space-y-2">
-              {store.signedPacts.map((floor) => {
+              {signedPacts.map((floor) => {
                const guardian = GUARDIANS[floor];
                if (!guardian) return null;
                return (
@@ -214,7 +264,7 @@ export function StatsTab({
              })}
              <div className="flex justify-between text-sm font-semibold border-t border-gray-700 pt-2 mt-2">
                <span className="text-gray-300">Combined Pact Multiplier:</span>
-                <span className="text-amber-400">×{fmtDec(store.signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
+                <span className="text-amber-400">×{fmtDec(signedPacts.reduce((m, f) => m * (GUARDIANS[f]?.pact || 1), 1), 2)}</span>
              </div>
            </div>
          )}
@@ -232,38 +282,38 @@ export function StatsTab({
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-amber-400 game-mono">{store.loopCount}</div>
+              <div className="text-2xl font-bold text-amber-400 game-mono">{loopCount}</div>
              <div className="text-xs text-gray-400">Loops Completed</div>
            </div>
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-purple-400 game-mono">{fmt(store.insight)}</div>
+              <div className="text-2xl font-bold text-purple-400 game-mono">{fmt(insight)}</div>
              <div className="text-xs text-gray-400">Current Insight</div>
            </div>
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-blue-400 game-mono">{fmt(store.totalInsight)}</div>
+              <div className="text-2xl font-bold text-blue-400 game-mono">{fmt(totalInsight)}</div>
              <div className="text-xs text-gray-400">Total Insight</div>
            </div>
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-2xl font-bold text-green-400 game-mono">{store.maxFloorReached}</div>
+              <div className="text-2xl font-bold text-green-400 game-mono">{maxFloorReached}</div>
              <div className="text-xs text-gray-400">Max Floor</div>
            </div>
          </div>
          <Separator className="bg-gray-700 my-3" />
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(store.spells).filter(s => s.learned).length}</div>
+              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(spells).filter(s => s.learned).length}</div>
              <div className="text-xs text-gray-400">Spells Learned</div>
            </div>
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(store.skills).reduce((a, b) => a + b, 0)}</div>
+              <div className="text-xl font-bold text-gray-300 game-mono">{Object.values(skills).reduce((a, b) => a + b, 0)}</div>
              <div className="text-xs text-gray-400">Total Skill Levels</div>
            </div>
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{fmt(store.totalManaGathered)}</div>
+              <div className="text-xl font-bold text-gray-300 game-mono">{fmt(totalManaGathered)}</div>
              <div className="text-xs text-gray-400">Total Mana Gathered</div>
            </div>
            <div className="p-3 bg-gray-800/50 rounded text-center">
-              <div className="text-xl font-bold text-gray-300 game-mono">{store.memorySlots}</div>
+              <div className="text-xl font-bold text-gray-300 game-mono">{memorySlots}</div>
              <div className="text-xs text-gray-400">Memory Slots</div>
            </div>
          </div>
@@ -21,14 +21,13 @@ export { useGameStore } from './gameStore';
 export { useGameLoop } from './gameHooks';
 export type { GameCoordinatorState, GameCoordinatorStore } from './gameStore';

-// Re-export utilities from utils.ts
+// Re-export utilities from utils.ts and computed-stats
 export {
  fmt,
  fmtDec,
  getFloorMaxHP,
  getFloorElement,
  computeMaxMana,
-  computeElementMax,
  computeRegen,
  computeEffectiveRegen,
  computeClickMana,
@@ -41,3 +40,7 @@ export {
  canAffordSpellCost,
  deductSpellCost,
 } from '../utils';
+
+export { computeElementMax } from '../store-modules/computed-stats';
+
+export { getStudySpeedMultiplier, getStudyCostMultiplier } from '../constants';