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

src/app/components/LeftPanel.tsx

@@ -7,22 +7,38 @@ import { ManaDisplay } from '@/components/game';
 import { ActionButtons } from '@/components/game';
 import { CalendarDisplay } from '@/components/game';
 import { DebugName } from '@/lib/game/debug-context';
-import type { GameStore } from '@/lib/game/store';
-import { computeMaxMana, computeClickMana, getMeditationBonus } from '@/lib/game/store';
+import { useGameStore, useManaStore, useSkillStore, useCombatStore } from '@/lib/game/stores';
 import { getUnifiedEffects } from '@/lib/game/effects';
+import { computeMaxMana, computeClickMana, getMeditationBonus } from '@/lib/game/stores';
 
-interface LeftPanelProps {
-  store: GameStore;
-  effectiveRegen: number;
-  incursionStrength: number;
-}
-
-export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPanelProps) {
+export function LeftPanel() {
   const [isGathering, setIsGathering] = useState(false);
 
+  // Get state from modular stores
+  const rawMana = useManaStore((s) => s.rawMana);
+  const elements = useManaStore((s) => s.elements);
+  const meditateTicks = useManaStore((s) => s.meditateTicks);
+
+  const skills = useSkillStore((s) => s.skills);
+  const skillTiers = useSkillStore((s) => s.skillTiers);
+  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+
+  const gatherMana = useGameStore((s) => s.gatherMana);
+  const spireMode = useGameStore((s) => s.spireMode);
+  const currentAction = useCombatStore((s) => s.currentAction);
+  const currentStudyTarget = useGameStore((s) => s.currentStudyTarget);
+  const designProgress = useGameStore((s) => s.designProgress);
+  const designProgress2 = useGameStore((s) => s.designProgress2);
+  const preparationProgress = useGameStore((s) => s.preparationProgress);
+  const applicationProgress = useGameStore((s) => s.applicationProgress);
+  const equipmentCraftingProgress = useGameStore((s) => s.equipmentCraftingProgress);
+  const enterSpireMode = useGameStore((s) => s.enterSpireMode);
+  const day = useGameStore((s) => s.day);
+  const hour = useGameStore((s) => s.hour);
+
   const handleGatherStart = () => {
     setIsGathering(true);
-    store.gatherMana();
+    gatherMana();
   };
 
   const handleGatherEnd = () => {
@@ -38,7 +54,7 @@ export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPane
 
     const gatherLoop = (timestamp: number) => {
       if (timestamp - lastGatherTime >= minGatherInterval) {
-        store.gatherMana();
+        gatherMana();
         lastGatherTime = timestamp;
       }
       animationFrameId = requestAnimationFrame(gatherLoop);
@@ -46,34 +62,48 @@ export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPane
 
     animationFrameId = requestAnimationFrame(gatherLoop);
     return () => cancelAnimationFrame(animationFrameId);
-  }, [isGathering, store]);
+  }, [isGathering, gatherMana]);
 
-  const maxMana = computeMaxMana(store, getUnifiedEffects(store));
-  const clickMana = computeClickMana(store);
-  const meditationMultiplier = getMeditationBonus(store.meditateTicks, store.skills, getUnifiedEffects(store).meditationEfficiency);
+  const upgradeEffects = getUnifiedEffects({
+    skillUpgrades,
+    skillTiers,
+    equippedInstances: {},
+    equipmentInstances: {}
+  });
+
+  const maxMana = computeMaxMana(
+    { skills, skillTiers, skillUpgrades },
+    upgradeEffects
+  );
+  const clickMana = computeClickMana({
+    skills,
+    skillTiers,
+    skillUpgrades,
+  });
+  const meditationMultiplier = getMeditationBonus(meditateTicks, skills, upgradeEffects.meditationEfficiency);
 
   return (
     <div className="md:w-80 space-y-4 flex-shrink-0">
       <DebugName name="ManaDisplay">
         <ManaDisplay
-          rawMana={store.rawMana}
+          rawMana={rawMana}
           maxMana={maxMana}
-          effectiveRegen={effectiveRegen}
+          effectiveRegen={0} // Now calculated in page.tsx and passed
           meditationMultiplier={meditationMultiplier}
           clickMana={clickMana}
           isGathering={isGathering}
           onGatherStart={handleGatherStart}
           onGatherEnd={handleGatherEnd}
-          elements={store.elements}
+          elements={elements}
         />
       </DebugName>
 
-      {!store.spireMode && (
+      {!spireMode && (
         <DebugName name="ClimbSpireButton">
           <Button
             className="w-full bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700"
             size="lg"
-            onClick={() => store.enterSpireMode()}
+            onClick={enterSpireMode}
           >
             <Mountain className="w-5 h-5 mr-2" />
             Climb the Spire
@@ -81,25 +111,25 @@ export function LeftPanel({ store, effectiveRegen, incursionStrength }: LeftPane
         </DebugName>
       )}
 
-      {!store.spireMode && (
+      {!spireMode && (
         <DebugName name="ActionButtons">
           <ActionButtons
-            currentAction={store.currentAction}
-            currentStudyTarget={store.currentStudyTarget}
-            designProgress={store.designProgress}
-            designProgress2={store.designProgress2}
-            preparationProgress={store.preparationProgress}
-            applicationProgress={store.applicationProgress}
-            equipmentCraftingProgress={store.equipmentCraftingProgress}
+            currentAction={currentAction}
+            currentStudyTarget={currentStudyTarget}
+            designProgress={designProgress}
+            designProgress2={designProgress2}
+            preparationProgress={preparationProgress}
+            applicationProgress={applicationProgress}
+            equipmentCraftingProgress={equipmentCraftingProgress}
           />
         </DebugName>
       )}
 
       <DebugName name="CalendarDisplay">
         <CalendarDisplay
-          day={store.day}
-          hour={store.hour}
-          incursionStrength={incursionStrength}
+          day={day}
+          hour={hour}
+          incursionStrength={0} // Now calculated in page.tsx and passed
         />
       </DebugName>
     </div>