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

src/components/game/tabs/SkillsTab.tsx

@@ -1,4 +1,4 @@
-// ─── Skills Tab ───────────────────────────────────────────────────
+// ─── Skills Tab ───────────────────────────────────────────────────────────────
 // SkillsTab - Displays all skills organized by category
 // Refactored: extracted components for better modularity (reduced from 400 lines)
 
@@ -19,7 +19,7 @@ import {
 } from '@/lib/game/skill-evolution';
 import { getUnifiedEffects } from '@/lib/game/effects';
 import { getAvailableSkillCategories } from '@/lib/game/data/attunements';
-import { fmt, fmtDec } from '@/lib/game/store';
+import { fmt, fmtDec } from '@/lib/game/stores';
 import type { SkillUpgradeChoice } from '@/lib/game/types';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -39,13 +39,9 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { SkillRow } from './SkillRow';
 import { useSkillUpgradeSelection } from '@/lib/game/hooks/useSkillUpgradeSelection';
 import { CategorySkillsList } from './CategorySkillsList';
-import type { GameStore } from '@/lib/game/store';
+import { useGameStore, useSkillStore, usePrestigeStore } from '@/lib/game/stores';
 
-export interface SkillsTabProps {
-  store: GameStore;
-}
-
-export function SkillsTab({ store }: SkillsTabProps) {
+export function SkillsTab() {
   const showToast = useGameToast();
   const [upgradeDialogSkill, setUpgradeDialogSkill] = useState<string | null>(null);
   const [upgradeDialogMilestone, setUpgradeDialogMilestone] = useState<5 | 10>(5);
@@ -55,8 +51,20 @@ export function SkillsTab({ store }: SkillsTabProps) {
     skillName: string;
   } | null>(null);
 
-  const studySpeedMult = getStudySpeedMultiplier(store.skills);
-  const upgradeEffects = getUnifiedEffects(store as any);
+  const skills = useSkillStore((s) => s.skills);
+  const skillUpgrades = useSkillStore((s) => s.skillUpgrades);
+  const skillTiers = useSkillStore((s) => s.skillTiers);
+  const prestigeUpgrades = usePrestigeStore((s) => s.prestigeUpgrades);
+  const currentStudyTarget = useGameStore((s) => s.currentStudyTarget);
+  const parallelStudyTarget = useGameStore((s) => s.parallelStudyTarget);
+  const startStudyingSkill = useSkillStore((s) => s.startStudyingSkill);
+  const startParallelStudySkill = useSkillStore((s) => s.startParallelStudySkill);
+  const cancelStudy = useGameStore((s) => s.cancelStudy);
+  const commitSkillUpgrades = useSkillStore((s) => s.commitSkillUpgrades);
+  const tierUpSkill = useSkillStore((s) => s.tierUpSkill);
+
+  const studySpeedMult = getStudySpeedMultiplier({ skills, prestigeUpgrades, skillUpgrades, skillTiers });
+  const upgradeEffects = getUnifiedEffects({ skillUpgrades, skillTiers, equippedInstances: {}, equipmentInstances: {} });
 
   // Upgrade selection hook
   const {
@@ -84,7 +92,12 @@ export function SkillsTab({ store }: SkillsTabProps) {
   const getUpgradeChoices = () => {
     if (!upgradeDialogSkill)
       return { available: [] as SkillUpgradeChoice[], selected: [] as string[] };
-    return store.getSkillUpgradeChoices(upgradeDialogSkill, upgradeDialogMilestone);
+    const skillDef = SKILLS_DEF[upgradeDialogSkill.includes('_t') ? upgradeDialogSkill.split('_t')[0] : upgradeDialogSkill];
+    if (!skillDef) return { available: [] as SkillUpgradeChoice[], selected: [] as string[] };
+    return {
+      available: getUpgradesForSkillAtMilestone(upgradeDialogSkill, upgradeDialogMilestone),
+      selected: skillUpgrades[upgradeDialogSkill] || [],
+    };
   };
 
   const { available, selected: alreadySelected } = getUpgradeChoices();
@@ -92,11 +105,12 @@ export function SkillsTab({ store }: SkillsTabProps) {
   // Handle upgrade dialog confirm
   const handleConfirm = () => {
     hookHandleConfirm(
-      upgradeDialogSkill,
+      upgradeDialogSkill!,
       upgradeDialogMilestone,
-      (skillId, selections, milestone) =>
-        store.commitSkillUpgrades(skillId, selections, milestone),
-      () => setUpgradeDialogSkill(null)
+      (skillId: string, selections: string[], milestone: 5 | 10) => {
+        commitSkillUpgrades(skillId, selections, milestone);
+        return () => setUpgradeDialogSkill(null);
+      }
     );
   };
 
@@ -116,20 +130,20 @@ export function SkillsTab({ store }: SkillsTabProps) {
   // Handle study start with toast
   const handleStartStudying = (skillId: string) => {
     const skillDef = SKILLS_DEF[skillId.includes('_t') ? skillId.split('_t')[0] : skillId];
-    store.startStudyingSkill(skillId);
+    startStudyingSkill(skillId);
     showToast('info', 'Study Started', `Studying ${skillDef?.name || 'skill'}...`);
   };
 
   // Handle parallel study start with toast
   const handleParallelStudy = (skillId: string) => {
     const skillDef = SKILLS_DEF[skillId.includes('_t') ? skillId.split('_t')[0] : skillId];
-    store.startParallelStudySkill(skillId);
+    startParallelStudySkill(skillId);
     showToast('info', 'Parallel Study Started', `Studying ${skillDef?.name || 'skill'} in parallel (50% speed)...`);
   };
 
   // Handle study cancel with confirmation
   const handleCancelStudy = () => {
-    const currentTarget = store.currentStudyTarget;
+    const currentTarget = currentStudyTarget;
     if (currentTarget?.type === 'skill') {
       const skillDef = SKILLS_DEF[currentTarget.id.includes('_t') ? currentTarget.id.split('_t')[0] : currentTarget.id];
       setCancelStudyConfirm({
@@ -141,7 +155,7 @@ export function SkillsTab({ store }: SkillsTabProps) {
 
   const confirmCancelStudy = () => {
     if (cancelStudyConfirm) {
-      store.cancelStudy();
+      cancelStudy();
       showToast(
         'warning',
         'Study Cancelled',
@@ -152,7 +166,8 @@ export function SkillsTab({ store }: SkillsTabProps) {
   };
 
   // Get available skill categories based on attunements
-  const availableCategories = getAvailableSkillCategories(store.attunements || {});
+  const attunements = useGameStore((s) => s.attunements);
+  const availableCategories = getAvailableSkillCategories(attunements || {});
 
   return (
     <div className="space-y-4">
@@ -189,12 +204,12 @@ export function SkillsTab({ store }: SkillsTabProps) {
       )}
 
       {/* Current Study Progress */}
-      {store.currentStudyTarget && store.currentStudyTarget.type === 'skill' && (
+      {currentStudyTarget && currentStudyTarget.type === 'skill' && (
         <Card className="bg-gray-900/80 border-purple-600/50">
           <CardContent className="pt-4">
             <StudyProgress
-              currentStudyTarget={store.currentStudyTarget}
-              skills={store.skills}
+              currentStudyTarget={currentStudyTarget}
+              skills={skills}
               studySpeedMult={studySpeedMult}
               cancelStudy={handleCancelStudy}
             />
@@ -210,10 +225,13 @@ export function SkillsTab({ store }: SkillsTabProps) {
           availableCategories={availableCategories}
           isCollapsed={collapsedCategories.has(cat.id)}
           onToggleCategory={toggleCategory}
-          store={store}
+          skills={skills}
+          skillUpgrades={skillUpgrades}
+          skillTiers={skillTiers}
+          prestigeUpgrades={prestigeUpgrades}
           studySpeedMult={studySpeedMult}
           upgradeEffects={upgradeEffects}
-          currentStudyTarget={store.currentStudyTarget}
+          currentStudyTarget={currentStudyTarget}
           onStartStudying={handleStartStudying}
           onParallelStudy={handleParallelStudy}
           onCancelStudy={handleCancelStudy}
@@ -222,7 +240,7 @@ export function SkillsTab({ store }: SkillsTabProps) {
             setUpgradeDialogMilestone(milestone);
             setPendingSelections([]);
           }}
-          onTierUp={(skillId) => store.tierUpSkill(skillId)}
+          onTierUp={(skillId) => tierUpSkill(skillId)}
           pendingSelections={pendingSelections}
           setPendingSelections={setPendingSelections}
         />
@@ -230,4 +248,5 @@ export function SkillsTab({ store }: SkillsTabProps) {
     </div>
   );
 }
+
 SkillsTab.displayName = "SkillsTab";