fix: persist enchantment design state across tab navigation

- EnchantmentDesigner now reads selection state directly from useCraftingStore
  instead of receiving it as props, so state survives tab unmount/remount
- EnchanterSubTab no longer uses local useState for selectedEquipmentType,
  selectedEffects, designName, selectedDesign — all sourced from store
- Removed unused EnchantmentDesignerProps interface from types
- All 1158 existing tests pass, no new type errors introduced

Fixes #366

src/components/game/crafting/EnchantmentDesigner.tsx

@@ -2,8 +2,7 @@
 
 import { GameCard } from '@/components/ui/game-card';
 import { Separator } from '@/components/ui/separator';
-import type { EquipmentInstance, EnchantmentDesign, DesignEffect, EquipmentCraftingProgress, EquipmentCategory } from '@/lib/game/types';
-import type { EnchantmentDesignerProps } from './EnchantmentDesigner/types';
+import type { DesignEffect, EquipmentCategory } from '@/lib/game/types';
 import { EquipmentTypeSelector } from './EnchantmentDesigner/EquipmentTypeSelector';
 import { EffectSelector } from './EnchantmentDesigner/EffectSelector';
 import { SavedDesigns } from './EnchantmentDesigner/SavedDesigns';
@@ -22,20 +21,21 @@ import {
 import { useCraftingStore, useAttunementStore } from '@/lib/game/stores';
 import { DebugName } from '@/components/game/debug/debug-context';
 
-export function EnchantmentDesigner({
-  selectedEquipmentType,
-  setSelectedEquipmentType,
-  selectedEffects,
-  setSelectedEffects,
-  designName,
-  setDesignName,
-  selectedDesign,
-  setSelectedDesign,
-}: EnchantmentDesignerProps) {
+export function EnchantmentDesigner() {
   // Attunement store — get Enchanter level for effect selector gating
   const enchanterLevel = useAttunementStore((s) => s.attunements?.enchanter?.level ?? 0);
 
-  // Crafting store selectors
+  // Crafting store selectors — persisted selection state
+  const selectedEquipmentType = useCraftingStore((s) => s.enchantmentSelection.selectedEquipmentType);
+  const setSelectedEquipmentType = useCraftingStore((s) => s.setSelectedEquipmentType);
+  const selectedEffects = useCraftingStore((s) => s.enchantmentSelection.selectedEffects);
+  const setSelectedEffects = useCraftingStore((s) => s.setSelectedEffects);
+  const designName = useCraftingStore((s) => s.enchantmentSelection.designName);
+  const setDesignName = useCraftingStore((s) => s.setDesignName);
+  const selectedDesign = useCraftingStore((s) => s.enchantmentSelection.selectedDesign);
+  const setSelectedDesign = useCraftingStore((s) => s.setSelectedDesign);
+
+  // Crafting store — other state
   const enchantmentDesigns = useCraftingStore((s) => s.enchantmentDesigns);
   const designProgress = useCraftingStore((s) => s.designProgress);
   const startDesigningEnchantment = useCraftingStore((s) => s.startDesigningEnchantment);

src/components/game/crafting/EnchantmentDesigner/types.ts

@@ -1,15 +1,4 @@
-import type { EquipmentInstance, EnchantmentDesign, DesignEffect, DesignProgress, EquipmentCategory } from '@/lib/game/types';
-
-export interface EnchantmentDesignerProps {
-  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;
-}
+import type { EnchantmentDesign, DesignEffect, DesignProgress, EquipmentCategory } from '@/lib/game/types';
 
 export interface EquipmentTypeSelectorProps {
   ownedEquipmentTypes: Array<{ id: string; name: string; baseCapacity: number }>;

src/components/game/tabs/CraftingTab/EnchanterSubTab.tsx

@@ -9,7 +9,6 @@ import {
   EnchantmentApplier,
 } from '@/components/game/crafting';
 import { useCraftingStore } from '@/lib/game/stores';
-import type { DesignEffect } from '@/lib/game/types';
 import { DebugName } from '@/components/game/debug/debug-context';
 
 type EnchanterPhase = 'design' | 'prepare' | 'apply';
@@ -23,14 +22,17 @@ const PHASES: { key: EnchanterPhase; label: string; icon: typeof PenLine }[] = [
 export function EnchanterSubTab() {
   const [activePhase, setActivePhase] = useState<EnchanterPhase>('design');
 
-  // Shared state for the enchantment flow
-  const [selectedEquipmentType, setSelectedEquipmentType] = useState<string | null>(null);
-  const [selectedEffects, setSelectedEffects] = useState<DesignEffect[]>([]);
-  const [designName, setDesignName] = useState('');
-  const [selectedDesign, setSelectedDesign] = useState<string | null>(null);
-  const [selectedEquipmentInstance, setSelectedEquipmentInstance] = useState<string | null>(null);
-
   const resetEnchantmentSelection = useCraftingStore((s) => s.resetEnchantmentSelection);
+  const setSelectedEquipmentInstance = useCraftingStore((s) => s.setSelectedEquipmentInstance);
+  const setSelectedDesign = useCraftingStore((s) => s.setSelectedDesign);
+
+  // Read persisted selection state from the store
+  const selectedEquipmentInstance = useCraftingStore(
+    (s) => s.enchantmentSelection.selectedEquipmentInstance,
+  );
+  const selectedDesign = useCraftingStore(
+    (s) => s.enchantmentSelection.selectedDesign,
+  );
 
   const handlePhaseChange = (phase: EnchanterPhase) => {
     setActivePhase(phase);
@@ -67,16 +69,7 @@ export function EnchanterSubTab() {
 
       {/* Phase content */}
       {activePhase === 'design' && (
-        <EnchantmentDesigner
-          selectedEquipmentType={selectedEquipmentType}
-          setSelectedEquipmentType={setSelectedEquipmentType}
-          selectedEffects={selectedEffects}
-          setSelectedEffects={setSelectedEffects}
-          designName={designName}
-          setDesignName={setDesignName}
-          selectedDesign={selectedDesign}
-          setSelectedDesign={setSelectedDesign}
-        />
+        <EnchantmentDesigner />
       )}
 
       {activePhase === 'prepare' && (