blacktrigram 0.7.2

package/lib/components/screens/training/TrainingScreen3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrainingScreen3D.js","names":[],"sources":["../../../../src/components/screens/training/TrainingScreen3D.tsx"],"sourcesContent":["/**\n * TrainingScreen3D - Three.js-based training screen\n *\n * Refactored to use consolidated hooks matching CombatScreen architecture.\n * Provides 3D training dummy with vital point targeting and UI overlays.\n *\n * UI Rendering: All HUD elements are rendered in an absolute-positioned div\n * OUTSIDE the Canvas, matching CombatScreen's reliable rendering pattern.\n * This eliminates the need for Html overlays inside Three.js and ensures\n * HUDs appear immediately without waiting for Canvas initialization.\n *\n * Architecture (Consolidated in PR #1394 + Issue #1398):\n * - TrainingLeftHUD: Anatomy controls, guard indicator\n * - TrainingRightHUD: Training stats, mode selector, vital point selection\n * - TrainingTopHUD: Training controls, archetype selector, return button\n * - TrainingBottomHUD: Technique bar, feedback messages, mobile controls\n * - VitalPointOverlayControlsPure: Vital point overlay controls (pure DOM)\n *\n * All UI components render as pure DOM in the HUD overlay div (lines 1230+).\n * NO Html components from @react-three/drei are used inside the Canvas.\n * This ensures clean separation of 3D rendering and UI layers.\n *\n * @korean 훈련화면3D - 훈련 상태 훅을 사용한 리팩토링된 3D 훈련 화면\n */\n\n// UI renders outside Canvas in absolute-positioned div - no Html needed\nimport { Canvas, useFrame } from \"@react-three/fiber\";\nimport { AccelerationUpdater } from \"../../../systems/movement/helpers/AccelerationUpdater\";\nimport {\n  isRunningSpeed,\n  STEP_DISTANCE_THRESHOLDS,\n} from \"../../../systems/movement/helpers/accelerationUtils\";\nimport {\n  Bloom,\n  EffectComposer,\n  Noise,\n  Vignette,\n} from \"@react-three/postprocessing\";\nimport * as THREE from \"three\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useAudio } from \"../../../audio/AudioProvider\";\nimport { useCombatAudio } from \"../../screens/combat/hooks/useCombatAudio\";\nimport { getArchetypePhysicalAttributes } from \"../../../data/archetypePhysicalAttributes\";\nimport { usePlayerAnimation } from \"../../../hooks/usePlayerAnimation\";\nimport { useTechniqueSelection } from \"../../../hooks/useTechniqueSelection\";\nimport { GestureEvent } from \"../../../hooks/useTouchControls\";\nimport { useWebGLContextLossHandler } from \"../../../hooks/useWebGLContextLossHandler\";\nimport { PlayerState } from \"../../../systems\";\nimport {\n  AnimationEvents,\n  AnimationState,\n  AnimationType,\n  getAnimationForTechnique,\n} from \"../../../systems/animation\";\nimport { getAnimationForTechniqueOrDefault } from \"../../../systems/animation/core/TechniqueAnimationMapping\";\nimport { physicalReachCalculator } from \"../../../systems/physics\";\nimport {\n  MovementType,\n  SpeedModifierSystem,\n} from \"../../../systems/physics/SpeedModifierSystem\";\nimport { TRIGRAM_STANCES_ORDER } from \"../../../systems/trigram/types\";\nimport {\n  CombatState,\n  PlayerArchetype,\n  Position,\n  Technique,\n  TrigramStance,\n} from \"../../../types\";\nimport { getPerformanceSettings } from \"../../../types/constants\";\nimport { getMobileControlsBottom } from \"../../../types/constants/layout\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { DEFAULT_BODY_RADIUS_METERS } from \"../../../types/physicsConstants\";\nimport { usePlayerMovement } from \"../../../utils/inputSystem\";\nimport { calculateDistance3D } from \"../../../utils/math\";\nimport { createCameraConfig } from \"../../../utils/sharedPhysicsConfig\";\nimport {\n  animationStateToPlayerAnimation,\n  convertPlayerStateToProps,\n} from \"../../../utils/player3DHelpers\";\nimport { useKoreanTheme } from \"../../shared/base/useKoreanTheme\";\nimport {\n  GestureRecognizerPure,\n  StanceWheelPure,\n} from \"../../shared/mobile\";\nimport {\n  MobileControlsOverlay,\n  type ButtonEventType,\n  type Direction,\n  type DPadEventType,\n} from \"../../shared/mobile/MobileControlsPure\";\nimport {\n  Player3DWithTransitions,\n  VitalPointMarkers3D,\n  type BodyRegionFilter,\n} from \"../../shared/three\";\nimport { StanceChangeIndicator } from \"../../shared/three/indicators/StanceChangeIndicator\";\nimport { CombatArena3D } from \"../../shared/three/scene/CombatArena3D\";\nimport { VitalPointOverlayControlsPure } from \"../../shared/ui/VitalPointOverlayControlsPure\";\nimport AnatomyOverlay3D, {\n  type AnatomyLayer,\n} from \"./components/AnatomyOverlay3D\";\nimport FootPlacementMarkers3D from \"./components/FootPlacementMarkers3D\";\nimport HitFeedbackEffect3D from \"./components/HitFeedbackEffect3D\";\nimport type { DifficultyMode } from \"./components/TrainingDummy3D\";\nimport TrainingDummy3D from \"./components/TrainingDummy3D\";\n// HUD Components - Organized UI layout\nimport {\n  TrainingBottomHUD,\n  TrainingLeftHUD,\n  TrainingRightHUD,\n  TrainingTopHUD,\n} from \"./components/hud\";\n// Attack movement hook for player forward momentum\nimport { useAttackMovement } from \"./hooks/useAttackMovement\";\nimport useTrainingActions from \"./hooks/useTrainingActions\";\nimport { useTrainingLayout } from \"./hooks/useTrainingLayout\";\nimport useTrainingState from \"./hooks/useTrainingState\";\n\n/**\n * AnimationUpdater - Component that updates player animation at 60fps\n *\n * @korean 훈련애니메이션업데이터 - 60fps로 플레이어 애니메이션을 업데이트하는 컴포넌트\n */\ninterface TrainingAnimationUpdaterProps {\n  readonly playerAnimation: ReturnType<typeof usePlayerAnimation>;\n}\n\nconst TrainingAnimationUpdater: React.FC<TrainingAnimationUpdaterProps> = ({\n  playerAnimation,\n}) => {\n  useFrame((_state, delta) => {\n    playerAnimation.update(delta);\n  });\n\n  return null;\n};\n\n/**\n * Props for the TrainingScreen3D component\n */\nexport interface TrainingScreen3DProps {\n  /** Callback to update player state */\n  readonly onPlayerUpdate: (updates: Partial<PlayerState>) => void;\n  /** Callback when returning to menu */\n  readonly onReturnToMenu: () => void;\n  /** Canvas width in pixels. Defaults to 1200 */\n  readonly width?: number;\n  /** Canvas height in pixels. Defaults to 800 */\n  readonly height?: number;\n  /** Initial archetype from IntroScreen selection. Defaults to MUSA */\n  readonly initialArchetype?: PlayerArchetype;\n}\n\n/**\n * TrainingScreen3D Component\n * Three.js-based training screen with 3D dummy and Html UI\n *\n * Uses consolidated hooks for state management matching CombatScreen architecture.\n */\nexport const TrainingScreen3D: React.FC<TrainingScreen3DProps> = ({\n  onPlayerUpdate,\n  onReturnToMenu,\n  width = 1200,\n  height = 800,\n  initialArchetype = PlayerArchetype.MUSA,\n}) => {\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 1: Core State Management (Hooks)\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // UI overlays now render outside Canvas in absolute-positioned div\n  // This matches CombatScreen pattern for reliable, immediate rendering\n  // No mount delay needed - UI is not dependent on Three.js render loop\n\n  // Consolidated training state management (matches useCombatState pattern)\n  const { state: trainingState, actions: trainingActions } = useTrainingState();\n\n  // Audio context\n  const audio = useAudio();\n  \n  // Combat audio for bone impact sounds\n  const { playBoneImpactSound, playAttackSound, playStanceChangeSound } =\n    useCombatAudio();\n\n  // Responsive detection and layout (using dedicated training layout hook)\n  const { trainingAreaBounds, isMobile, screenSize } = useTrainingLayout(\n    width,\n    height,\n  );\n\n  // Use Korean theme hook for consistent theming\n  const theme = useKoreanTheme({\n    variant: \"primary\",\n    size: \"md\",\n    isMobile,\n  });\n\n  // Screen size scaling for 4K and large displays\n  // Uses SPACING_SCALE_MAP values: mobile=0.5, tablet=0.75, desktop=1.0, large=1.25, xlarge=1.5\n  const positionScale = React.useMemo(() => {\n    switch (screenSize) {\n      case \"mobile\":\n        return 1.0; // Mobile already has special handling\n      case \"tablet\":\n        return 1.0;\n      case \"desktop\":\n        return 1.0;\n      case \"large\":\n        return 1.25;\n      case \"xlarge\":\n        return 1.5; // 4K displays need 1.5x offsets\n      default:\n        return 1.0;\n    }\n  }, [screenSize]);\n\n  // Training difficulty and vital point configuration\n  const difficulty: DifficultyMode = \"normal\";\n  const vitalPointCount = 70; // Show all 70 vital points\n\n  // Archetype selection for training (allows testing different body types)\n  // 원형 선택 - 다양한 체형 테스트 가능\n  // Uses initialArchetype from IntroScreen selection, can be changed locally\n  const [selectedArchetype, setSelectedArchetype] =\n    React.useState<PlayerArchetype>(initialArchetype);\n\n  // Vital point overlay state\n  const [overlayVisible, setOverlayVisible] = React.useState(false);\n  const [severityFilters, setSeverityFilters] = React.useState<\n    import(\"../../../types/common\").VitalPointSeverity[]\n  >([]);\n  const [regionFilter, setRegionFilter] =\n    React.useState<BodyRegionFilter>(\"all\");\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const [showLabels, setShowLabels] = React.useState(true);\n  const [animated, setAnimated] = React.useState(true);\n  // Use combat-consistent scale (1.2) for better visibility across screens\n  const [scale, setScale] = React.useState(1.2);\n\n\n  // Track current attack animation for technique-specific animations\n  // 기술별 애니메이션을 위한 현재 공격 애니메이션 추적\n  const [attackAnimation, setAttackAnimation] = React.useState<\n    string | undefined\n  >(undefined);\n\n  // Keyboard shortcut for toggling overlay (V key only - Ctrl removed)\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"v\" || e.key === \"V\") {\n        setOverlayVisible((prev) => !prev);\n        audio.playSFX(\"menu_select\");\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [audio]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 2: WebGL Context Management\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Track context loss for recovery\n  const contextLossCountRef = useRef(0);\n\n  // Handle WebGL context loss and restoration (for 3D scene only)\n  useWebGLContextLossHandler({\n    onContextLost: () => {\n      console.warn(\"⚠️ WebGL context lost in TrainingScreen\");\n      contextLossCountRef.current += 1;\n    },\n    onContextRestored: () => {\n      console.log(\"✓ WebGL context restored in TrainingScreen\");\n    },\n    autoRestore: true,\n  });\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 2B: Speed Modifier System (matching CombatScreen pattern)\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Speed Modifier System for dynamic movement speed calculations\n  const speedModifierSystem = useMemo(() => new SpeedModifierSystem(), []);\n\n  // Track speed modifiers for movement (simplified for training - no injuries)\n  // Updated dynamically based on acceleration-based running\n  const [speedModifiers, setSpeedModifiers] = useState({\n    finalSpeed: 6.0, // BASE_WALK_SPEED (6.0 m/s for responsive combat)\n    baseSpeed: 6.0,\n    finalAcceleration: 12.0, // BASE_ACCELERATION (12.0 m/s² for quick response)\n  });\n\n  // Track walk/run speeds for acceleration interpolation (archetype-aware)\n  const [walkRunSpeeds, setWalkRunSpeeds] = useState({\n    walkSpeed: 6.0,\n    runSpeed: 10.0,\n  });\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 3: Movement & Position Management\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Initial player position in pixel space (left side of arena, centered vertically)\n  // Physics-first: initial position in METERS (relative to arena center)\n  // 0% from center (centered laterally) creates ~1.2m distance to dummy\n  // This allows most kicks to land immediately, punches require 1-2 steps (realistic)\n  const initialPositionMeters = useMemo<Position>(\n    () => ({\n      x: trainingAreaBounds.worldWidthMeters * 0.0, // Centered laterally\n      y: 0, // Centered vertically\n    }),\n    [trainingAreaBounds],\n  );\n\n  // CRITICAL FIX: Memoize onPositionChange to prevent usePlayerMovement callback recreation\n  // Without this, a new function is created every render, causing animation frame cancellation\n  const handlePositionChange = useCallback(\n    (newPosition: Position) => {\n      onPlayerUpdate({ position: newPosition });\n    },\n    [onPlayerUpdate],\n  );\n\n  // CRITICAL FIX: Memoize bounds object to prevent usePlayerMovement callback recreation\n  // Without this, a new object reference is created every render, causing animation frame cancellation\n  const movementBounds = useMemo(\n    () => ({\n      worldWidthMeters: trainingAreaBounds.worldWidthMeters,\n      worldDepthMeters: trainingAreaBounds.worldDepthMeters,\n    }),\n    [trainingAreaBounds.worldWidthMeters, trainingAreaBounds.worldDepthMeters],\n  );\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 3A: Acceleration-Based Running System\n  // ═══════════════════════════════════════════════════════════════════════════\n  \n  // Track continuous movement time for acceleration-based running\n  // 가속 기반 달리기를 위한 연속 이동 시간 추적\n  const movementTimeRef = useRef(0);\n  const lastDirectionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });\n  \n  // Track acceleration-based speed (interpolated between walk and run speeds)\n  // This applies archetype speeds and stance modifiers\n  const [accelerationBasedSpeed, setAccelerationBasedSpeed] = useState(\n    walkRunSpeeds.walkSpeed\n  );\n  \n  // Determine if currently running using utility function with archetype run speed\n  const isRunning = isRunningSpeed(accelerationBasedSpeed, walkRunSpeeds.runSpeed);\n\n  // Player movement with physics-based acceleration and stance modifiers\n  // All positions are in METERS - no pixel conversions\n  const { playerPosition, isMoving, velocity } = usePlayerMovement({\n    enabled: true, // Always allow movement in training screen\n    bounds: movementBounds, // Use memoized bounds object\n    onPositionChange: handlePositionChange, // Use memoized callback\n    initialPositionMeters,\n    // Physics parameters for realistic training movement (always enabled)\n    currentStance: TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex],\n    legInjuryFactor: 0, // No injury in training mode\n    isRunning, // Use computed acceleration-based running state\n    // Use interpolated speed between modifier-aware walk/run speeds\n    // This preserves archetype speeds and stance modifiers\n    maxSpeedOverride: accelerationBasedSpeed,\n    accelerationOverride: speedModifiers.finalAcceleration,\n  });\n\n  // Physics-first: playerPosition is already in METERS (x = lateral, y = forward/backward)\n  // Direct conversion to 3D world coordinates - no pixel math needed\n  const player3DPosition = useMemo<[number, number, number]>(() => {\n    // playerPosition.x is lateral position in meters (- = left, + = right)\n    // playerPosition.y is forward/backward position in meters (- = toward camera, + = away)\n    return [playerPosition.x, 0, playerPosition.y];\n  }, [playerPosition]);\n\n  // Dummy position in meters (right side, creating optimal training distance)\n  // Positioned at 15% from center to give ~1.2-1.6m distance depending on archetype\n  // Allows kicks to hit from starting position, punches with slight approach\n  // Uses world dimensions for physics-consistent positioning\n  const dummyPosition = useMemo<[number, number, number]>(\n    () => [trainingAreaBounds.worldWidthMeters * 0.15, 0, 0],\n    [trainingAreaBounds.worldWidthMeters],\n  );\n\n  // Calculate center-to-center distance to dummy in meters\n  const centerToCenterDistance = useMemo(\n    () => calculateDistance3D(player3DPosition, dummyPosition),\n    [player3DPosition, dummyPosition],\n  );\n\n  // Calculate effective distance (adjusted for body radius)\n  // Attacks hit the body surface, not the center point\n  // Training dummy uses DEFAULT_BODY_RADIUS_METERS since it has no archetype\n  // For combat between players, use calculateBodyRadius(targetPhysicalAttributes)\n  // 실제 타격거리 = 중심간거리 - 목표체 반경\n  const distanceToDummy = useMemo(\n    () => Math.max(0, centerToCenterDistance - DEFAULT_BODY_RADIUS_METERS),\n    [centerToCenterDistance],\n  );\n\n  // Track last facing rotation for when movement stops\n  const lastFacingRotationRef = useRef<number>(0);\n\n  // Calculate rotation: face movement direction when moving, face dummy when idle\n  // 이동 중에는 이동 방향을, 정지 시에는 더미를 향함\n  const playerRotation = useMemo(() => {\n    if (isMoving && velocity && (velocity.x !== 0 || velocity.y !== 0)) {\n      // When moving: face the direction of movement\n      // velocity.x is lateral (left/right), velocity.y is forward/backward (Z in 3D)\n      // Use velocity.y directly (not negated) so down arrow faces correctly\n      return Math.atan2(velocity.x, velocity.y);\n    } else {\n      // When idle: face the dummy (target)\n      const dx = dummyPosition[0] - player3DPosition[0];\n      const dz = dummyPosition[2] - player3DPosition[2];\n      return Math.atan2(dx, dz);\n    }\n  }, [isMoving, velocity, player3DPosition, dummyPosition]);\n\n  // Update ref in effect to avoid updating during render\n  useEffect(() => {\n    lastFacingRotationRef.current = playerRotation;\n  }, [playerRotation]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 3B: Foot Laterality Alternation (발바닥 교대)\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Track current laterality (which foot is forward)\n  // Alternates with each step during walking/running for realistic footwork\n  // 왼발서기 (left) ↔ 오른발서기 (right)\n  const [currentLaterality, setCurrentLaterality] = useState<\"left\" | \"right\">(\"right\");\n  \n  // Track step counter for alternating feet\n  const stepCounterRef = useRef(0);\n  const lastPositionRef = useRef<Position>(playerPosition);\n  \n  // Alternate laterality based on movement distance\n  useEffect(() => {\n    if (!isMoving) {\n      // Reset step counter when not moving and sync last position\n      stepCounterRef.current = 0;\n      lastPositionRef.current = playerPosition;\n      return;\n    }\n\n    // Calculate distance traveled since last check\n    const dx = playerPosition.x - lastPositionRef.current.x;\n    const dy = playerPosition.y - lastPositionRef.current.y;\n    const distanceMoved = Math.sqrt(dx * dx + dy * dy);\n    \n    // Accumulate distance into step counter\n    const stepThreshold = isRunning \n      ? STEP_DISTANCE_THRESHOLDS.RUN \n      : STEP_DISTANCE_THRESHOLDS.WALK;\n    stepCounterRef.current += distanceMoved;\n    \n    // Determine how many step thresholds were crossed in this update\n    const stepsCrossed = Math.floor(stepCounterRef.current / stepThreshold);\n    if (stepsCrossed > 0) {\n      // Net laterality change depends on whether the number of steps is odd or even\n      // Odd steps = toggle once, even steps = no net change\n      if (stepsCrossed % 2 === 1) {\n        setCurrentLaterality(prev => prev === \"right\" ? \"left\" : \"right\");\n      }\n      // Preserve remainder distance after accounting for full steps\n      stepCounterRef.current -= stepsCrossed * stepThreshold;\n    }\n    \n    // Update last position\n    lastPositionRef.current = playerPosition;\n  }, [playerPosition, isMoving, isRunning]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 4: Player Animation State Machine\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Reference for pending attack (executed at animation frame 6)\n  // Includes animationType and startTime for distance-based hit detection\n  // matching CombatSystem behavior\n  const pendingAttackRef = useRef<{\n    accuracy: number;\n    vitalPoint: string;\n    animationType?: AnimationType;\n    startTime?: number;\n    techniqueId?: string;\n  } | null>(null);\n\n  // Forward ref for handleDummyHit (defined in actions hook)\n  const handleDummyHitRef = useRef<\n    (\n      vitalPointId: string,\n      attackContext?: {\n        animationType?: AnimationType;\n        techniqueId?: string;\n      },\n    ) => boolean\n  >(() => false);\n\n  // Ref for playerAnimation to avoid circular dependencies in animation events\n  const playerAnimationRef = useRef<ReturnType<\n    typeof usePlayerAnimation\n  > | null>(null);\n\n  // Player animation events (matches CombatScreen pattern)\n  const playerAnimationEvents = useMemo<AnimationEvents>(\n    () => ({\n      onFrame: (frame, state) => {\n        // Execute attack at midpoint of animation (frame 6 of 12)\n        if (state === \"attack\" && frame === 6 && pendingAttackRef.current) {\n          const attackData = pendingAttackRef.current;\n          // Pass attack context to handleDummyHit before clearing the ref\n          // This ensures animationType and techniqueId are available for reach calculation\n          handleDummyHitRef.current(attackData.vitalPoint, {\n            animationType: attackData.animationType,\n            techniqueId: attackData.techniqueId,\n          });\n          pendingAttackRef.current = null;\n        }\n      },\n      onAnimationComplete: (state) => {\n        if (state === \"stance_change\") {\n          // Stance change animation completed - transition to stance guard\n          // 자세 변경 완료 - 자세 가드로 전환\n          playStanceChangeSound();\n          const currentStance =\n            TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex];\n          if (currentStance && playerAnimationRef.current) {\n            playerAnimationRef.current.transitionToStanceGuard(currentStance);\n          }\n        }\n      },\n    }),\n    [playStanceChangeSound, trainingState.currentStanceIndex],\n  );\n\n  const playerAnimation = usePlayerAnimation({\n    events: playerAnimationEvents,\n  });\n\n  // Store animation ref for use in event callbacks\n  useEffect(() => {\n    playerAnimationRef.current = playerAnimation;\n  }, [playerAnimation]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 5: Training Actions (Hook-based)\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Get current stance for animation transitions (needed before useTrainingActions)\n  // 현재 자세 (애니메이션 전환용)\n  const currentStance = useMemo(\n    () => TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex],\n    [trainingState.currentStanceIndex],\n  );\n\n  // Track previous stance for visual feedback (StanceChangeIndicator)\n  // 이전 자세 추적 - 자세 변경 표시기 시각적 피드백용\n  const [previousStanceIndex, setPreviousStanceIndex] = useState<number>(0);\n\n  // Ref to track current technique's animation type (updated by technique selection)\n  // This allows useTrainingActions to access the current technique's animation type\n  // without creating circular dependencies\n  const currentTechniqueAnimationTypeRef = useRef<AnimationType>(\n    AnimationType.JAB,\n  );\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 7: Training Player State (Visual Display)\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Training player state for visualization\n  const trainingPlayerState = useMemo<PlayerState>(() => {\n    return {\n      id: \"training-player\",\n      name: { korean: \"훈련생\", english: \"Trainee\" },\n      archetype: selectedArchetype,\n      health: 100,\n      maxHealth: 100,\n      ki: 100,\n      maxKi: 100,\n      stamina: 100,\n      maxStamina: 100,\n      energy: 100,\n      maxEnergy: 100,\n      attackPower: 10,\n      defense: 10,\n      speed: 10,\n      technique: 10,\n      pain: 0,\n      consciousness: 100,\n      balance: 100,\n      momentum: 0,\n      currentStance: TRIGRAM_STANCES_ORDER[trainingState.currentStanceIndex],\n      combatState: CombatState.IDLE,\n      position: playerPosition,\n      isBlocking: false,\n      isStunned: false,\n      isCountering: false,\n      lastActionTime: 0,\n      recoveryTime: 0,\n      lastStanceChangeTime: 0,\n      statusEffects: [],\n      activeEffects: [],\n      vitalPoints: [],\n      totalDamageReceived: 0,\n      totalDamageDealt: 0,\n      hitsTaken: 0,\n      hitsLanded: trainingState.stats.hits,\n      perfectStrikes: trainingState.perfectStrikes,\n      vitalPointHits: 0,\n      misses: trainingState.stats.misses,\n      accuracy: trainingState.stats.accuracy,\n      comboCount: trainingState.stats.combo,\n    };\n  }, [playerPosition, trainingState, selectedArchetype]);\n\n  // Calculate speed modifiers when player state changes\n  // Updates at 5Hz (every 200ms) matching CombatScreen pattern\n  // Get both walk and run speeds for acceleration interpolation\n  useEffect(() => {\n    const updateSpeedModifiers = () => {\n      // Calculate modifiers for both walking and running to get archetype-aware speeds\n      const walkModifiers = speedModifierSystem.calculateSpeedModifiers(\n        trainingPlayerState,\n        MovementType.WALKING,\n        false, // isCrouching\n      );\n\n      const runModifiers = speedModifierSystem.calculateSpeedModifiers(\n        trainingPlayerState,\n        MovementType.RUNNING,\n        false, // isCrouching\n      );\n\n      setSpeedModifiers({\n        finalSpeed: walkModifiers.finalSpeed,\n        baseSpeed: walkModifiers.baseSpeed,\n        finalAcceleration: walkModifiers.finalAcceleration,\n      });\n\n      // Store walk/run speeds for acceleration interpolation\n      // These account for archetype speeds and stance modifiers\n      setWalkRunSpeeds({\n        walkSpeed: walkModifiers.finalSpeed,\n        runSpeed: runModifiers.finalSpeed,\n      });\n    };\n\n    // Initial calculation\n    updateSpeedModifiers();\n\n    // Update every 200ms (5Hz) for responsive feedback without excessive re-renders\n    const intervalId = setInterval(updateSpeedModifiers, 200);\n\n    return () => clearInterval(intervalId);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [trainingPlayerState]); // speedModifierSystem is memoized and never changes\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 5: Player Attack Movement (Forward Momentum)\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Determine if player is currently attacking based on animation state\n  const isPlayerAttacking = useMemo(\n    () => playerAnimation?.currentState === \"attack\",\n    [playerAnimation],\n  );\n\n  // Calculate attack direction (toward dummy)\n  // Note: Direction is calculated on every position change to ensure attacks\n  // always target the current dummy position, even if the player is moving.\n  // This is intentional for responsive gameplay where attacks can be initiated mid-movement.\n  const attackDirection = useMemo(() => {\n    // Only calculate if attacking to avoid unnecessary work\n    if (!isPlayerAttacking) {\n      return new THREE.Vector3(0, 0, 1); // Default forward direction\n    }\n    const dx = dummyPosition[0] - player3DPosition[0];\n    const dz = dummyPosition[2] - player3DPosition[2];\n    return new THREE.Vector3(dx, 0, dz).normalize();\n  }, [dummyPosition, player3DPosition, isPlayerAttacking]);\n\n  // Apply attack movement physics to player position\n  // Note: currentTechniqueAnimationTypeRef.current is intentionally a ref to avoid\n  // unnecessary re-renders. The animation type is read at attack start (in useAttackMovement's\n  // internal effect) and doesn't need to be reactive. It's always set before isPlayerAttacking\n  // becomes true via the handleAttack action.\n  const {\n    currentPosition: player3DPositionWithAttackMovement,\n  } = useAttackMovement({\n    isAttacking: isPlayerAttacking,\n    animationType: currentTechniqueAnimationTypeRef.current,\n    currentStance: trainingPlayerState.currentStance,\n    basePosition: player3DPosition,\n    attackDirection,\n    animationDuration: 0.4,\n  });\n\n  // Use position with attack movement for rendering\n  const finalPlayer3DPosition = isPlayerAttacking\n    ? player3DPositionWithAttackMovement\n    : player3DPosition;\n\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Ref to store handleAttack for use in useTechniqueSelection callback\n  // This breaks circular dependency between useTechniqueSelection and useTrainingActions\n  const handleAttackRef = useRef<(() => void) | null>(null);\n\n  // Technique selection and execution for training\n  // Moved before useTrainingActions to provide selectedTechniqueId\n  const techniqueSelection = useTechniqueSelection({\n    player: trainingPlayerState,\n    enabled: trainingState.isTraining,\n    onTechniqueExecute: useCallback(\n      (technique: Technique) => {\n        // Show technique usage feedback\n        trainingActions.setFeedback(\n          `${technique.name.korean} 사용! | Used ${technique.name.english}!`,\n        );\n\n        // Set attack animation based on technique\n        // 기술에 따른 공격 애니메이션 설정\n        const animationName = getAnimationForTechnique(\n          technique.name.english || technique.id,\n        );\n        setAttackAnimation(animationName);\n\n        // In training mode, do not deduct resources to allow continuous practice\n        // Resources are displayed for educational purposes only\n\n        // Execute attack with technique (visual feedback)\n        // Use ref to avoid circular dependency\n        handleAttackRef.current?.();\n      },\n      [trainingActions],\n    ),\n  });\n\n  // Derive selected technique ID for intensity-based attack sounds\n  const selectedTechniqueId = useMemo(() => {\n    const techniques = techniqueSelection.availableTechniques;\n    const selectedIdx = techniqueSelection.selectedIndex;\n    if (techniques.length === 0 || selectedIdx < 0 || selectedIdx >= techniques.length) {\n      return undefined;\n    }\n    return techniques[selectedIdx]?.id;\n  }, [techniqueSelection.availableTechniques, techniqueSelection.selectedIndex]);\n\n  // Training actions hook (matches useCombatActions pattern)\n  const {\n    handleStartTraining,\n    handleStopTraining,\n    handleDummyHit,\n    handleDummyDefeated,\n    handleStanceChange,\n    handleAttack,\n  } = useTrainingActions({\n    state: trainingState,\n    actions: trainingActions,\n    playerPosition,\n    player3DPosition,\n    dummyPosition,\n    playerArchetype: selectedArchetype,\n    playerStance: currentStance,\n    currentTechniqueAnimationTypeRef, // Ref for technique's animation type\n    audio,\n    playBoneImpactSound, // Pass bone impact audio function from useCombatAudio\n    playAttackSound, // Pass attack sound function from useCombatAudio\n    selectedTechniqueId, // Pass selected technique ID for intensity-based attack sounds\n    onPlayerUpdate: (updates) => {\n      onPlayerUpdate(updates);\n    },\n    playerAnimation: {\n      transitionTo: playerAnimation.transitionTo,\n      transitionToStanceGuard: playerAnimation.transitionToStanceGuard,\n      currentState: playerAnimation.currentState,\n    },\n    pendingAttackRef, // Share the ref with animation events\n  });\n\n  // Update handleAttack ref for useTechniqueSelection callback\n  useEffect(() => {\n    handleAttackRef.current = handleAttack;\n  }, [handleAttack]);\n\n  // Update the ref so animation events can call handleDummyHit\n  useEffect(() => {\n    handleDummyHitRef.current = handleDummyHit;\n  }, [handleDummyHit]);\n\n  // Wrapped stance change handler with visual feedback tracking\n  // 시각적 피드백 추적을 포함한 자세 변경 핸들러 래퍼\n  const handleStanceChangeWithVisualFeedback = useCallback(\n    (stanceIndex: number) => {\n      // Capture previous stance before the change for visual indicator\n      setPreviousStanceIndex(trainingState.currentStanceIndex);\n      // Execute the actual stance change\n      handleStanceChange(stanceIndex);\n    },\n    [handleStanceChange, trainingState.currentStanceIndex],\n  );\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 6: Movement-Animation Synchronization\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Sync movement with animation (matches CombatScreen pattern)\n  const prevIsMovingRef = useRef<boolean>(isMoving);\n  const prevIsRunningRef = useRef<boolean>(isRunning);\n  const prevStanceRef = useRef<TrigramStance>(currentStance);\n  \n  useEffect(() => {\n    const isMovingChanged = prevIsMovingRef.current !== isMoving;\n    const isRunningChanged = prevIsRunningRef.current !== isRunning;\n    const stanceChanged = prevStanceRef.current !== currentStance;\n    \n    if (isMovingChanged || isRunningChanged) {\n      if (isMoving) {\n        // Transition to running or walking animation based on state\n        if (isRunning) {\n          playerAnimation.transitionTo(AnimationState.RUN);\n        } else {\n          playerAnimation.transitionTo(AnimationState.WALK);\n        }\n      } else if (playerAnimation.currentState === AnimationState.WALK || \n                 playerAnimation.currentState === AnimationState.RUN) {\n        // When stopping movement, transition to stance-specific guard animation\n        // 이동 중지 시 자세별 가드 애니메이션으로 전환\n        playerAnimation.transitionToStanceGuard(currentStance);\n      }\n      prevIsMovingRef.current = isMoving;\n      prevIsRunningRef.current = isRunning;\n    }\n    \n    // Update idle/guard animation when stance changes\n    if (stanceChanged && !isMoving) {\n      // If idle, update to new stance guard\n      if (playerAnimation.currentState === AnimationState.IDLE || \n          playerAnimation.isInStanceGuard()) {\n        playerAnimation.transitionToStanceGuard(currentStance);\n      }\n      prevStanceRef.current = currentStance;\n    }\n  }, [isMoving, isRunning, currentStance, playerAnimation]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 7B: Technique Selection System (Moved earlier - see before useTrainingActions)\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Convert cooldowns to Map for TechniqueBar\n  const cooldownsMap = useMemo(() => {\n    const map = new Map<string, number>();\n    techniqueSelection.activeCooldowns.forEach((cd) => {\n      map.set(cd.techniqueId, cd.remaining);\n    });\n    return map;\n  }, [techniqueSelection.activeCooldowns]);\n\n  // Calculate effective reach based on selected technique (matches CombatSystem)\n  // 선택된 기술에 따른 유효 사정거리 계산 (전투 시스템과 동일)\n  const { currentTechniqueReach, currentAnimationType } = useMemo(() => {\n    const techniques = techniqueSelection.availableTechniques;\n    const selectedIdx = techniqueSelection.selectedIndex;\n    if (techniques.length === 0) {\n      return {\n        currentTechniqueReach: 0.7,\n        currentAnimationType: AnimationType.JAB,\n      };\n    }\n    const currentTechnique =\n      techniques[Math.min(selectedIdx, techniques.length - 1)];\n    if (!currentTechnique) {\n      return {\n        currentTechniqueReach: 0.7,\n        currentAnimationType: AnimationType.JAB,\n      };\n    }\n    // Get animation type from technique ID\n    const animConfig = getAnimationForTechniqueOrDefault(currentTechnique.id);\n    // Calculate max reach using physical attributes and stance\n    const physicalAttributes =\n      getArchetypePhysicalAttributes(selectedArchetype);\n    const reach = physicalReachCalculator.calculateMaxReach(\n      physicalAttributes,\n      animConfig.type,\n      currentStance,\n    );\n    return {\n      currentTechniqueReach: reach,\n      currentAnimationType: animConfig.type,\n    };\n  }, [\n    techniqueSelection.availableTechniques,\n    techniqueSelection.selectedIndex,\n    selectedArchetype,\n    currentStance,\n  ]);\n\n  // Update the animation type ref in an effect (not during render)\n  // 렌더링 중이 아닌 effect에서 ref 업데이트\n  useEffect(() => {\n    currentTechniqueAnimationTypeRef.current = currentAnimationType;\n  }, [currentAnimationType]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 8: Mobile Touch Controls\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Reference for tracking active mobile movement key (prevents stuck keys)\n  const activeMobileKeyRef = useRef<string | null>(null);\n\n  // Enable mobile controls always in training (allow movement even before starting training)\n  const mobileControlsEnabled = isMobile;\n\n  // Mobile D-pad movement handler (matches CombatScreen implementation)\n  const handleMobileMove = useCallback(\n    (direction: Direction | null, eventType: DPadEventType) => {\n      // Map D-pad directions to movement keys (WASD)\n      const directionMap: Record<Direction, string> = {\n        up: \"w\",\n        \"up-right\": \"w\",\n        right: \"d\",\n        \"down-right\": \"s\",\n        down: \"s\",\n        \"down-left\": \"s\",\n        left: \"a\",\n        \"up-left\": \"w\",\n      };\n\n      if (eventType === \"start\" && direction) {\n        // Release previous key if different (prevents stuck keys)\n        if (\n          activeMobileKeyRef.current &&\n          activeMobileKeyRef.current !== directionMap[direction]\n        ) {\n          const prevKey = activeMobileKeyRef.current;\n          window.dispatchEvent(\n            new KeyboardEvent(\"keyup\", {\n              key: prevKey,\n              code: `Key${prevKey.toUpperCase()}`,\n              bubbles: true,\n              cancelable: true,\n            }),\n          );\n        }\n\n        // Press new key with proper keyboard event properties\n        const key = directionMap[direction];\n        activeMobileKeyRef.current = key;\n        window.dispatchEvent(\n          new KeyboardEvent(\"keydown\", {\n            key,\n            code: `Key${key.toUpperCase()}`,\n            bubbles: true,\n            cancelable: true,\n          }),\n        );\n      } else if (eventType === \"end\") {\n        // Release active key when D-pad released\n        if (activeMobileKeyRef.current) {\n          const key = activeMobileKeyRef.current;\n          window.dispatchEvent(\n            new KeyboardEvent(\"keyup\", {\n              key,\n              code: `Key${key.toUpperCase()}`,\n              bubbles: true,\n              cancelable: true,\n            }),\n          );\n          activeMobileKeyRef.current = null;\n        }\n      }\n    },\n    [],\n  );\n\n  // Mobile attack handler - uses the same handleAttack from training actions\n  const handleMobileAttack = useCallback(() => {\n    handleAttack();\n  }, [handleAttack]);\n\n  // Mobile block handler\n  const handleMobileBlock = useCallback(\n    (eventType: ButtonEventType) => {\n      if (eventType === \"start\") {\n        audio.playSFX(\"block\");\n      }\n    },\n    [audio],\n  );\n\n  // Mobile gesture handler\n  const handleMobileGesture = useCallback(\n    (gesture: GestureEvent) => {\n      switch (gesture.type) {\n        case \"swipe-right\":\n          window.dispatchEvent(new KeyboardEvent(\"keydown\", { key: \"d\" }));\n          break;\n        case \"swipe-left\":\n          window.dispatchEvent(new KeyboardEvent(\"keydown\", { key: \"a\" }));\n          break;\n        case \"swipe-up\":\n          if (trainingState.isTraining) {\n            window.dispatchEvent(new KeyboardEvent(\"keydown\", { key: \" \" }));\n          }\n          break;\n        case \"swipe-down\":\n          trainingActions.resetDummy();\n          break;\n        case \"two-finger-tap\":\n          trainingActions.setTrainingMode(\n            trainingState.trainingMode === \"vital_point\"\n              ? \"basics\"\n              : \"vital_point\",\n          );\n          audio.playSFX(\"menu_select\");\n          break;\n      }\n    },\n    [trainingState, trainingActions, audio],\n  );\n\n  // Mobile stance change handler\n  const handleMobileStanceChange = useCallback(\n    (stanceIndex: number) => {\n      handleStanceChangeWithVisualFeedback(stanceIndex);\n    },\n    [handleStanceChangeWithVisualFeedback],\n  );\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 9: Keyboard Input Handling\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const key = event.key.toLowerCase();\n\n      // ESC key - return to menu\n      if (key === \"escape\") {\n        onReturnToMenu();\n        return;\n      }\n\n      // Handle stance changes (1-8) - always available for exploration\n      if (key >= \"1\" && key <= \"8\") {\n        const stanceIndex = parseInt(key) - 1;\n        handleStanceChangeWithVisualFeedback(stanceIndex);\n        event.preventDefault();\n        return;\n      }\n\n      // Handle attacks (Space key) - always available for exploration\n      if (key === \" \") {\n        handleAttack();\n        event.preventDefault();\n        return;\n      }\n    };\n\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [onReturnToMenu, handleStanceChangeWithVisualFeedback, handleAttack]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 10: Audio Lifecycle Management & Auto-Start Training\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Track if component has mounted to enable auto-start once\n  const hasMountedRef = useRef(false);\n\n  useEffect(() => {\n    let audioStarted = false;\n\n    const startMusic = async () => {\n      try {\n        // Start training music with a smooth 2s fade-in for better UX\n        await audio.fadeIn(\"cyberpunk_fusion\", 2000);\n        audioStarted = true;\n      } catch (err) {\n        console.warn(\"Failed to start training music:\", err);\n        trainingActions.setFeedback(\n          \"오디오 초기화 실패 | Audio initialization failed\",\n        );\n      }\n    };\n\n    void startMusic();\n\n    return () => {\n      if (audioStarted) {\n        void audio\n          .fadeOut(2000)\n          .then(() => audio.stopMusic())\n          .catch((err) => console.warn(\"Failed to stop training music:\", err));\n      }\n    };\n  }, [audio, trainingActions]);\n\n  // Auto-start training on mount (only once) - separate effect to avoid re-runs\n  useEffect(() => {\n    if (!hasMountedRef.current) {\n      hasMountedRef.current = true;\n      handleStartTraining();\n    }\n  }, [handleStartTraining]);\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 11: Feedback & Session Timer Effects\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Hide feedback after delay - 1500ms provides adequate time for bilingual text readability\n  // IMPORTANT: We depend on BOTH showFeedback AND feedback message so the timer resets\n  // when a new message arrives (even if showFeedback was already true)\n  useEffect(() => {\n    if (trainingState.showFeedback) {\n      const timer = setTimeout(() => trainingActions.hideFeedback(), 1500);\n      return () => clearTimeout(timer);\n    }\n  }, [trainingState.showFeedback, trainingState.feedback, trainingActions]);\n\n  // Update session duration\n  useEffect(() => {\n    if (!trainingState.isTraining || !trainingState.sessionStartTime) return;\n\n    const interval = setInterval(() => {\n      trainingActions.updateSessionDuration(\n        Math.floor((Date.now() - (trainingState.sessionStartTime ?? 0)) / 1000),\n      );\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [\n    trainingState.isTraining,\n    trainingState.sessionStartTime,\n    trainingActions,\n  ]);\n\n  // Auto-restart training when mode changes\n  const prevTrainingModeRef = useRef<typeof trainingState.trainingMode>(\n    trainingState.trainingMode,\n  );\n  const isFirstModeEffectRef = useRef<boolean>(true);\n  const isTrainingRef = useRef<boolean>(trainingState.isTraining);\n  const modeChangeTimerRef = useRef<NodeJS.Timeout | null>(null);\n\n  // Keep a ref in sync with the latest training state for use inside timeouts\n  useEffect(() => {\n    isTrainingRef.current = trainingState.isTraining;\n  }, [trainingState.isTraining]);\n\n  // Store callbacks in refs to avoid effect re-runs when they change\n  const handleStartTrainingRef = useRef(handleStartTraining);\n  const handleStopTrainingRef = useRef(handleStopTraining);\n\n  useEffect(() => {\n    handleStartTrainingRef.current = handleStartTraining;\n    handleStopTrainingRef.current = handleStopTraining;\n  }, [handleStartTraining, handleStopTraining]);\n\n  useEffect(() => {\n    // Explicitly skip the first execution on initial mount\n    if (isFirstModeEffectRef.current) {\n      isFirstModeEffectRef.current = false;\n      prevTrainingModeRef.current = trainingState.trainingMode;\n      return;\n    }\n\n    const previousMode = prevTrainingModeRef.current;\n    const modeChanged = previousMode !== trainingState.trainingMode;\n\n    if (!modeChanged) {\n      return;\n    }\n\n    // Update previous mode only when an actual change is detected\n    prevTrainingModeRef.current = trainingState.trainingMode;\n\n    // Clear any existing timer to prevent stale callbacks\n    if (modeChangeTimerRef.current) {\n      clearTimeout(modeChangeTimerRef.current);\n      modeChangeTimerRef.current = null;\n    }\n\n    // Restart training on mode change (matches UI message \"Auto-restarts on mode change\")\n    if (isTrainingRef.current) {\n      handleStopTrainingRef.current();\n    }\n\n    // Small delay to allow state to settle, then (re)start training unconditionally\n    modeChangeTimerRef.current = setTimeout(() => {\n      handleStartTrainingRef.current();\n      modeChangeTimerRef.current = null;\n    }, 100);\n\n    return () => {\n      if (modeChangeTimerRef.current) {\n        clearTimeout(modeChangeTimerRef.current);\n        modeChangeTimerRef.current = null;\n      }\n    };\n  }, [trainingState.trainingMode]); // Only depend on training mode to avoid unnecessary re-runs\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 12: Hit Effect Management\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  const handleEffectComplete = useCallback(\n    (effectId: number) => {\n      trainingActions.removeHitEffect(effectId);\n    },\n    [trainingActions],\n  );\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 13: Anatomy Layer Toggle\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  const handleAnatomyLayerToggle = useCallback(\n    (layer: AnatomyLayer) => {\n      trainingActions.toggleAnatomyLayer(layer);\n      audio.playSFX(\"menu_click\");\n    },\n    [trainingActions, audio],\n  );\n\n  const handleVitalPointClick = useCallback(\n    (pointId: string) => {\n      trainingActions.setSelectedVitalPoint(pointId);\n      audio.playSFX(\"menu_select\");\n    },\n    [trainingActions, audio],\n  );\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 14: Camera Configuration\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Use shared physics config for consistent camera setup across screens\n  // Mobile: tighter FOV and closer camera for better framing\n  // Desktop: wider FOV and further camera for full view\n  const cameraConfig = useMemo(\n    () => createCameraConfig(isMobile),\n    [isMobile],\n  );\n\n  // ═══════════════════════════════════════════════════════════════════════════\n  // SECTION 15: RENDER\n  // ═══════════════════════════════════════════════════════════════════════════\n\n  // Performance settings based on device tier\n  const performanceSettings = useMemo(() => {\n    return getPerformanceSettings(width, isMobile);\n  }, [width, isMobile]);\n\n  // SSAO removed - was causing WebGL context loss without NormalPass\n\n  return (\n    <div\n      style={{\n        width: `${width}px`,\n        height: `${height}px`,\n        position: \"relative\",\n        overflow: \"hidden\", // Prevent content from extending beyond container\n      }}\n      data-testid=\"training-screen-3d\"\n    >\n      <Canvas\n        style={{ width: `${width}px`, height: `${height}px` }}\n        gl={{\n          antialias: performanceSettings.antialias,\n          alpha: false,\n          powerPreference: \"high-performance\",\n          failIfMajorPerformanceCaveat: false, // Don't fail in software renderer\n          preserveDrawingBuffer: true, // Help with context stability\n        }}\n        dpr={performanceSettings.dpr}\n        shadows={false} // Temporarily disable shadows\n        onCreated={({ gl }) => {\n          gl.setClearColor(theme.colors.UI_BACKGROUND_DARK, 1);\n          // Disable fog temporarily for debugging\n        }}\n        camera={cameraConfig}\n      >\n        {/* Lighting - base lighting, arena provides additional */}\n        <ambientLight intensity={0.6} />\n        <directionalLight position={[10, 10, 5]} intensity={1.2} />\n\n        {/* Combat Arena 3D Environment - uses physics-based world dimensions */}\n        <CombatArena3D\n          lighting=\"cyberpunk\"\n          scale={trainingAreaBounds.scale}\n          worldWidthMeters={trainingAreaBounds.worldWidthMeters}\n          worldDepthMeters={trainingAreaBounds.worldDepthMeters}\n        />\n\n        {/* Animation updater - 60fps updates */}\n        <TrainingAnimationUpdater playerAnimation={playerAnimation} />\n\n        {/* Acceleration updater - tracks movement time and updates speed */}\n        <AccelerationUpdater\n          isMoving={isMoving}\n          velocity={velocity}\n          movementTimeRef={movementTimeRef}\n          lastDirectionRef={lastDirectionRef}\n          onSpeedUpdate={setAccelerationBasedSpeed}\n          walkSpeed={walkRunSpeeds.walkSpeed}\n          runSpeed={walkRunSpeeds.runSpeed}\n        />\n\n        {/* Training dummy at fixed position */}\n        <TrainingDummy3D\n          position={dummyPosition}\n          selectedVitalPoint={trainingState.selectedVitalPoint}\n          isTraining={trainingState.isTraining}\n          health={trainingState.dummyHealth}\n          onVitalPointHit={handleDummyHit}\n          onDefeated={handleDummyDefeated}\n          difficulty={difficulty}\n          vitalPointCount={vitalPointCount}\n          isMobile={isMobile}\n        />\n\n        {/* Anatomy overlay for educational visualization */}\n        {trainingState.visibleAnatomyLayers.length > 0 && (\n          <AnatomyOverlay3D\n            position={dummyPosition}\n            visibleLayers={trainingState.visibleAnatomyLayers}\n            opacity={0.6}\n            isMobile={isMobile}\n          />\n        )}\n\n        {/* Vital Point Overlay - Show all 70 points on dummy */}\n        {overlayVisible && (\n          <VitalPointMarkers3D\n            position={dummyPosition}\n            visible={overlayVisible}\n            severityFilter={severityFilters}\n            regionFilter={regionFilter}\n            searchQuery={searchQuery}\n            showLabels={showLabels}\n            scale={scale}\n            animated={animated}\n            selectedPoint={trainingState.selectedVitalPoint}\n            onPointClick={handleVitalPointClick}\n          />\n        )}\n\n        {/* Player model */}\n        <Player3DWithTransitions\n          {...convertPlayerStateToProps(\n            trainingPlayerState,\n            finalPlayer3DPosition,\n            playerRotation,\n            {\n              isMobile,\n              facing: \"right\",\n              enableFacialExpressions: true,\n              enableEyeTracking: true,\n              opponentPosition: dummyPosition,\n            },\n          )}\n          currentAnimation={animationStateToPlayerAnimation(\n            playerAnimation.currentState,\n          )}\n          attackAnimation={attackAnimation}\n          laterality={currentLaterality}\n          enableTransitionEffects={!isMobile}\n          enableStanceSymbol={true}\n          enableStanceAudio={true}\n        />\n\n        {/* Foot Placement Markers for Footwork Drills */}\n        {trainingState.trainingMode === \"footwork\" &&\n          trainingState.footworkDrillActive && (\n            <FootPlacementMarkers3D\n              centerPosition={dummyPosition}\n              pattern={\n                trainingState.footworkDrillType === \"free_practice\"\n                  ? \"none\"\n                  : trainingState.footworkDrillType\n              }\n              currentStep={trainingState.footworkDrillStep}\n              visible={true}\n              scale={1.0}\n              animated={true}\n            />\n          )}\n\n        {/* Hit effects */}\n        {trainingState.hitEffects.map((effect) => (\n          <HitFeedbackEffect3D\n            key={effect.id}\n            position={effect.position}\n            type={effect.type}\n            damage={effect.damage}\n            visible={effect.visible}\n            onComplete={() => handleEffectComplete(effect.id)}\n            isMobile={isMobile}\n          />\n        ))}\n\n        {/* Stance Change Visual Indicator */}\n        <StanceChangeIndicator\n          currentStance={trainingState.currentStanceIndex}\n          previousStance={previousStanceIndex}\n          isMobile={isMobile}\n        />\n\n        {/* NOTE: Mobile controls moved OUTSIDE Canvas for reliable touch events */}\n        {/* See MobileControlsPure component rendered after HUDs */}\n\n        {/* Post-processing Effects - lightweight only */}\n        {isMobile ? (\n          <EffectComposer multisampling={0}>\n            <Bloom\n              luminanceThreshold={0.9}\n              luminanceSmoothing={0.9}\n              mipmapBlur\n              intensity={0.8}\n              radius={0.4}\n            />\n            <Noise opacity={0.03} />\n            <Vignette eskil={false} offset={0.1} darkness={0.3} />\n          </EffectComposer>\n        ) : (\n          <EffectComposer multisampling={4}>\n            <Bloom\n              luminanceThreshold={0.9}\n              luminanceSmoothing={0.9}\n              mipmapBlur\n              intensity={0.8}\n              radius={0.4}\n            />\n            <Noise opacity={0.03} />\n            <Vignette eskil={false} offset={0.1} darkness={0.3} />\n          </EffectComposer>\n        )}\n      </Canvas>\n\n      {/* Html UI Overlays (positioned absolutely over Canvas) - matches CombatScreen pattern */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: \"100%\",\n          pointerEvents: \"none\",\n          zIndex: Z_INDEX.HUD,\n          // Use 'clip' for pure clipping without creating a scroll container\n          // Note: Both 'clip' and 'hidden' will clip box/text shadows; ensure\n          // any required shadow space is handled via padding on parent containers\n          overflow: \"clip\",\n        }}\n        data-testid=\"training-hud-overlay\"\n      >\n        {/* Left HUD - Anatomy Controls, Guard Indicator */}\n        <TrainingLeftHUD\n          width={width}\n          height={height}\n          isMobile={isMobile}\n          positionScale={positionScale}\n          visibleAnatomyLayers={trainingState.visibleAnatomyLayers}\n          onAnatomyLayerToggle={handleAnatomyLayerToggle}\n          currentStanceIndex={trainingState.currentStanceIndex}\n          isInGuard={playerAnimation.isInStanceGuard()}\n        />\n\n        {/* Top HUD - Training Controls, Archetype Selector, Return Button */}\n        <TrainingTopHUD\n          width={width}\n          height={height}\n          isMobile={isMobile}\n          positionScale={positionScale}\n          isTraining={trainingState.isTraining}\n          onStartTraining={handleStartTraining}\n          onStopTraining={handleStopTraining}\n          selectedArchetype={selectedArchetype}\n          onArchetypeSelect={setSelectedArchetype}\n          overlayVisible={overlayVisible}\n          onReturnToMenu={onReturnToMenu}\n          onPlaySFX={(sound) => audio.playSFX(sound)}\n        />\n\n        {/* Right HUD - Mode Selector, Stats, Vital Point Selection */}\n        <TrainingRightHUD\n          width={width}\n          height={height}\n          isMobile={isMobile}\n          positionScale={positionScale}\n          trainingMode={trainingState.trainingMode}\n          onModeChange={trainingActions.setTrainingMode}\n          stats={{\n            ...trainingState.stats,\n            sessionDuration: trainingState.sessionDuration,\n            bestCombo: trainingState.bestCombo,\n            perfectStrikes: trainingState.perfectStrikes,\n          }}\n          distanceToDummy={distanceToDummy}\n          effectiveReach={currentTechniqueReach}\n          selectedVitalPoint={trainingState.selectedVitalPoint}\n          onVitalPointSelect={trainingActions.setSelectedVitalPoint}\n          footworkDrillType={trainingState.footworkDrillType}\n          footworkDrillStep={trainingState.footworkDrillStep}\n          footworkDrillActive={trainingState.footworkDrillActive}\n          onStartFootworkDrill={trainingActions.startFootworkDrill}\n          onStopFootworkDrill={trainingActions.stopFootworkDrill}\n          onAdvanceFootworkStep={trainingActions.advanceFootworkStep}\n        />\n\n        {/* Bottom HUD - Technique Bar, Feedback Messages, Mobile Controls */}\n        <TrainingBottomHUD\n          width={width}\n          height={height}\n          isMobile={isMobile}\n          positionScale={positionScale}\n          techniques={techniqueSelection.availableTechniques}\n          player={trainingPlayerState}\n          selectedIndex={techniqueSelection.selectedIndex}\n          cooldowns={cooldownsMap}\n          onTechniqueSelect={techniqueSelection.selectTechnique}\n          showFeedback={trainingState.showFeedback}\n          feedbackMessage={trainingState.feedback}\n          selectedArchetype={selectedArchetype}\n          onArchetypeSelect={setSelectedArchetype}\n          onPlaySFX={(sound) => audio.playSFX(sound)}\n        />\n\n        {/* Vital Point Overlay Controls - Pure DOM overlay (outside Canvas) */}\n        {overlayVisible && (\n          <VitalPointOverlayControlsPure\n            visible={overlayVisible}\n            onVisibleChange={setOverlayVisible}\n            severityFilters={severityFilters}\n            onSeverityFiltersChange={setSeverityFilters}\n            regionFilter={regionFilter}\n            onRegionFilterChange={setRegionFilter}\n            searchQuery={searchQuery}\n            onSearchQueryChange={setSearchQuery}\n            showLabels={showLabels}\n            onShowLabelsChange={setShowLabels}\n            animated={animated}\n            onAnimatedChange={setAnimated}\n            scale={scale}\n            onScaleChange={setScale}\n            screenPosition={{ top: \"180px\", left: \"20px\" }}\n            isMobile={isMobile}\n          />\n        )}\n\n        {/* Mobile Controls - Pure DOM overlay (outside Canvas for reliable touch) */}\n        {isMobile && (\n          <>\n            <MobileControlsOverlay\n              onMove={handleMobileMove}\n              onAttack={handleMobileAttack}\n              onBlock={handleMobileBlock}\n              disabled={!mobileControlsEnabled}\n              bottom={getMobileControlsBottom()}\n              opacity={0.85}\n            />\n\n            <StanceWheelPure\n              currentStance={trainingState.currentStanceIndex}\n              onStanceChange={handleMobileStanceChange}\n              expanded={trainingState.stanceWheelExpanded}\n              onToggle={trainingActions.toggleStanceWheel}\n              disabled={!mobileControlsEnabled}\n              opacity={0.8}\n            />\n\n            <GestureRecognizerPure\n              onGesture={handleMobileGesture}\n              enabled={mobileControlsEnabled}\n              showFeedback={true}\n              minSwipeDistance={50}\n            />\n          </>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default TrainingScreen3D;\n"],"mappings":"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"}

package/lib/components/screens/training/components/AnatomyControlsOverlayHtml.d.ts

@@ -0,0 +1,31 @@
+/**
+ * AnatomyControlsOverlayHtml - Html UI for toggling anatomy visualization layers
+ *
+ * Provides buttons to toggle skeleton, nerves, vascular, and surface layers
+ * with consistent Korean martial arts cyberpunk theming.
+ *
+ * @module components/screens/training/components/AnatomyControlsOverlayHtml
+ * @category Training UI
+ * @korean 해부학제어오버레이
+ */
+import React from "react";
+import type { AnatomyLayer } from "./AnatomyOverlay3D";
+import "../training.css";
+/**
+ * Props for AnatomyControlsOverlayHtml component
+ */
+export interface AnatomyControlsOverlayHtmlProps {
+    /** Currently visible anatomy layers */
+    readonly visibleLayers: readonly AnatomyLayer[];
+    /** Callback when layer visibility changes */
+    readonly onLayerToggle: (layer: AnatomyLayer) => void;
+    /** Whether on mobile device */
+    readonly isMobile?: boolean;
+}
+/**
+ * AnatomyControlsOverlayHtml Component
+ * UI controls for anatomy layer visibility
+ */
+export declare const AnatomyControlsOverlayHtml: React.NamedExoticComponent<AnatomyControlsOverlayHtmlProps>;
+export default AnatomyControlsOverlayHtml;
+//# sourceMappingURL=AnatomyControlsOverlayHtml.d.ts.map

package/lib/components/screens/training/components/AnatomyControlsOverlayHtml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnatomyControlsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/AnatomyControlsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAcvD,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,uCAAuC;IACvC,QAAQ,CAAC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAC;IAChD,6CAA6C;IAC7C,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACtD,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AA8CD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,6DAoLrC,CAAC;AAIH,eAAe,0BAA0B,CAAC"}

package/lib/components/screens/training/components/AnatomyControlsOverlayHtml.js

@@ -0,0 +1,189 @@
+import { KOREAN_COLORS } from "../../../../types/constants/colors.js";
+import { FONT_FAMILY } from "../../../../types/constants/typography.js";
+import { SPACING } from "../../../../types/constants/ui.js";
+import "../../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../../utils/colorUtils.js";
+import { getNeonGlowEffect, getNeonTextShadow, getSmoothTransition } from "../../../../utils/visualEffects.js";
+import { formatBilingualText, getEnhancedKoreanOverlayStyles, getResponsiveSpacing } from "../../../../utils/koreanThemeHelpers.js";
+/* empty css          */
+import React, { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/screens/training/components/AnatomyControlsOverlayHtml.tsx
+/**
+* AnatomyControlsOverlayHtml - Html UI for toggling anatomy visualization layers
+* 
+* Provides buttons to toggle skeleton, nerves, vascular, and surface layers
+* with consistent Korean martial arts cyberpunk theming.
+* 
+* @module components/screens/training/components/AnatomyControlsOverlayHtml
+* @category Training UI
+* @korean 해부학제어오버레이
+*/
+var LAYER_CONFIGS = [
+	{
+		id: "skeleton",
+		korean: "골격",
+		english: "Skeleton",
+		icon: "🦴",
+		color: KOREAN_COLORS.TEXT_PRIMARY
+	},
+	{
+		id: "nerves",
+		korean: "신경",
+		english: "Nerves",
+		icon: "⚡",
+		color: KOREAN_COLORS.ACCENT_GOLD
+	},
+	{
+		id: "vascular",
+		korean: "혈관",
+		english: "Vascular",
+		icon: "❤️",
+		color: KOREAN_COLORS.ACCENT_RED
+	},
+	{
+		id: "surface",
+		korean: "표면",
+		english: "Surface",
+		icon: "👤",
+		color: KOREAN_COLORS.PRIMARY_CYAN
+	}
+];
+/**
+* AnatomyControlsOverlayHtml Component
+* UI controls for anatomy layer visibility
+*/
+var AnatomyControlsOverlayHtml = React.memo(({ visibleLayers, onLayerToggle, isMobile = false }) => {
+	const [hoveredLayer, setHoveredLayer] = useState(null);
+	const handleToggle = useCallback((layer) => {
+		onLayerToggle(layer);
+	}, [onLayerToggle]);
+	const panelWidth = isMobile ? 220 : 260;
+	const padding = getResponsiveSpacing("md", isMobile);
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			...getEnhancedKoreanOverlayStyles({
+				opacity: .88,
+				glowIntensity: "medium",
+				includeGradient: false,
+				includeBackdropBlur: true,
+				depthLayers: 3
+			}),
+			width: `${panelWidth}px`,
+			padding: `${padding}px`
+		},
+		"data-testid": "anatomy-controls-html",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: { marginBottom: `${SPACING.MD}px` },
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: isMobile ? "14px" : "16px",
+						fontWeight: "bold",
+						color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),
+						textShadow: getNeonTextShadow(KOREAN_COLORS.PRIMARY_CYAN, "medium"),
+						transition: getSmoothTransition("all", "normal")
+					},
+					children: formatBilingualText("해부학 표시", "Anatomy Display", "pipe")
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: `${SPACING.SM}px`
+				},
+				children: LAYER_CONFIGS.map((config) => {
+					const isActive = visibleLayers.includes(config.id);
+					const isHovered = hoveredLayer === config.id;
+					const layerColor = hexToRgbaString(config.color);
+					const activeBackground = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, .2);
+					const inactiveBackground = hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, .6);
+					const inactiveBorder = hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, .2);
+					const glowEffect = isActive || isHovered ? getNeonGlowEffect(config.color, isActive ? "strong" : "medium", true) : void 0;
+					return /* @__PURE__ */ jsxs("button", {
+						onClick: () => handleToggle(config.id),
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: `${SPACING.SM}px`,
+							background: isActive ? activeBackground : inactiveBackground,
+							border: `2px solid ${isActive ? layerColor : inactiveBorder}`,
+							borderRadius: `${SPACING.SM}px`,
+							padding: isMobile ? `${SPACING.SM}px ${SPACING.SM}px` : `${SPACING.SM}px ${SPACING.MD}px`,
+							cursor: "pointer",
+							transition: getSmoothTransition("all", "normal"),
+							fontFamily: FONT_FAMILY.KOREAN,
+							color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),
+							width: "100%",
+							transform: isHovered ? "scale(1.03)" : "scale(1)",
+							boxShadow: glowEffect
+						},
+						onMouseEnter: () => setHoveredLayer(config.id),
+						onMouseLeave: () => setHoveredLayer(null),
+						"data-testid": `anatomy-layer-${config.id}`,
+						"aria-label": `Toggle ${config.english} layer`,
+						"aria-pressed": isActive,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								style: {
+									fontSize: isMobile ? "18px" : "20px",
+									filter: isActive ? "none" : "grayscale(100%)",
+									opacity: isActive ? 1 : .5
+								},
+								children: config.icon
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								style: {
+									flex: 1,
+									textAlign: "left"
+								},
+								children: [/* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: isMobile ? "12px" : "13px",
+										fontWeight: "bold",
+										color: isActive ? layerColor : hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY)
+									},
+									children: config.korean
+								}), /* @__PURE__ */ jsx("div", {
+									style: {
+										fontSize: isMobile ? "9px" : "10px",
+										color: isActive ? hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY) : hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, .6)
+									},
+									children: config.english
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", { style: {
+								width: isMobile ? "8px" : "10px",
+								height: isMobile ? "8px" : "10px",
+								borderRadius: "50%",
+								background: isActive ? layerColor : hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, .2),
+								boxShadow: isActive ? `0 0 10px ${layerColor}` : "none"
+							} })
+						]
+					}, config.id);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					marginTop: `${SPACING.MD}px`,
+					paddingTop: `${SPACING.MD}px`,
+					borderTop: `1px solid ${hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, .1)}`,
+					fontSize: isMobile ? "9px" : "10px",
+					color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),
+					textAlign: "center",
+					lineHeight: "1.4",
+					fontFamily: FONT_FAMILY.KOREAN
+				},
+				children: formatBilingualText("클릭하여 표시/숨김", "Click to show/hide", "pipe")
+			})
+		]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.visibleLayers === nextProps.visibleLayers && prevProps.isMobile === nextProps.isMobile && prevProps.onLayerToggle === nextProps.onLayerToggle;
+});
+AnatomyControlsOverlayHtml.displayName = "AnatomyControlsOverlayHtml";
+//#endregion
+export { AnatomyControlsOverlayHtml as default };
+
+//# sourceMappingURL=AnatomyControlsOverlayHtml.js.map

package/lib/components/screens/training/components/AnatomyControlsOverlayHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnatomyControlsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/training/components/AnatomyControlsOverlayHtml.tsx"],"sourcesContent":["/**\n * AnatomyControlsOverlayHtml - Html UI for toggling anatomy visualization layers\n * \n * Provides buttons to toggle skeleton, nerves, vascular, and surface layers\n * with consistent Korean martial arts cyberpunk theming.\n * \n * @module components/screens/training/components/AnatomyControlsOverlayHtml\n * @category Training UI\n * @korean 해부학제어오버레이\n */\n\nimport React, { useCallback, useState } from \"react\";\nimport type { AnatomyLayer } from \"./AnatomyOverlay3D\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { SPACING } from \"../../../../types/constants/ui\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport {\n  formatBilingualText,\n  getEnhancedKoreanOverlayStyles,\n  getResponsiveSpacing,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport {\n  getNeonTextShadow,\n  getSmoothTransition,\n  getNeonGlowEffect,\n} from \"../../../../utils/visualEffects\";\nimport \"../training.css\";\n\n/**\n * Props for AnatomyControlsOverlayHtml component\n */\nexport interface AnatomyControlsOverlayHtmlProps {\n  /** Currently visible anatomy layers */\n  readonly visibleLayers: readonly AnatomyLayer[];\n  /** Callback when layer visibility changes */\n  readonly onLayerToggle: (layer: AnatomyLayer) => void;\n  /** Whether on mobile device */\n  readonly isMobile?: boolean;\n}\n\n/**\n * Layer button configuration with Korean colors\n * \n * @korean 레이어설정\n */\ninterface LayerConfig {\n  readonly id: AnatomyLayer;\n  readonly korean: string;\n  readonly english: string;\n  readonly icon: string;\n  readonly color: number; // Numeric hex color from KOREAN_COLORS\n}\n\nconst LAYER_CONFIGS: readonly LayerConfig[] = [\n  {\n    id: \"skeleton\",\n    korean: \"골격\",\n    english: \"Skeleton\",\n    icon: \"🦴\",\n    color: KOREAN_COLORS.TEXT_PRIMARY,\n  },\n  {\n    id: \"nerves\",\n    korean: \"신경\",\n    english: \"Nerves\",\n    icon: \"⚡\",\n    color: KOREAN_COLORS.ACCENT_GOLD,\n  },\n  {\n    id: \"vascular\",\n    korean: \"혈관\",\n    english: \"Vascular\",\n    icon: \"❤️\",\n    color: KOREAN_COLORS.ACCENT_RED,\n  },\n  {\n    id: \"surface\",\n    korean: \"표면\",\n    english: \"Surface\",\n    icon: \"👤\",\n    color: KOREAN_COLORS.PRIMARY_CYAN,\n  },\n];\n\n/**\n * AnatomyControlsOverlayHtml Component\n * UI controls for anatomy layer visibility\n */\nexport const AnatomyControlsOverlayHtml = React.memo<AnatomyControlsOverlayHtmlProps>(\n  ({\n    visibleLayers,\n    onLayerToggle,\n    isMobile = false,\n  }) => {\n  // State for hover effects\n  const [hoveredLayer, setHoveredLayer] = useState<AnatomyLayer | null>(null);\n\n  const handleToggle = useCallback(\n    (layer: AnatomyLayer) => {\n      onLayerToggle(layer);\n    },\n    [onLayerToggle]\n  );\n\n  const panelWidth = isMobile ? 220 : 260;\n  const padding = getResponsiveSpacing(\"md\", isMobile);\n\n  // Enhanced panel styles with neon glow\n  const panelStyle: React.CSSProperties = {\n    ...getEnhancedKoreanOverlayStyles({\n      opacity: 0.88,\n      glowIntensity: \"medium\",\n      includeGradient: false,\n      includeBackdropBlur: true,\n      depthLayers: 3,\n    }),\n    width: `${panelWidth}px`,\n    padding: `${padding}px`,\n  };\n\n  return (\n    <div\n      style={panelStyle}\n      data-testid=\"anatomy-controls-html\"\n    >\n      {/* Header with bilingual text */}\n      <div style={{ marginBottom: `${SPACING.MD}px` }}>\n        <div\n          style={{\n            fontSize: isMobile ? \"14px\" : \"16px\",\n            fontWeight: \"bold\",\n            color: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN),\n            textShadow: getNeonTextShadow(KOREAN_COLORS.PRIMARY_CYAN, \"medium\"),\n            transition: getSmoothTransition(\"all\", \"normal\"),\n          }}\n        >\n          {formatBilingualText(\"해부학 표시\", \"Anatomy Display\", \"pipe\")}\n        </div>\n      </div>\n\n      {/* Layer toggle buttons */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: `${SPACING.SM}px`,\n        }}\n      >\n        {LAYER_CONFIGS.map((config) => {\n          const isActive = visibleLayers.includes(config.id);\n          const isHovered = hoveredLayer === config.id;\n          const layerColor = hexToRgbaString(config.color);\n          const activeBackground = hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.2);\n          const inactiveBackground = hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_MEDIUM, 0.6);\n          const inactiveBorder = hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, 0.2);\n\n          // Enhanced glow effect for active/hovered states\n          const glowEffect = (isActive || isHovered) \n            ? getNeonGlowEffect(config.color, isActive ? \"strong\" : \"medium\", true)\n            : undefined;\n\n          return (\n            <button\n              key={config.id}\n              onClick={() => handleToggle(config.id)}\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: `${SPACING.SM}px`,\n                background: isActive ? activeBackground : inactiveBackground,\n                border: `2px solid ${isActive ? layerColor : inactiveBorder}`,\n                borderRadius: `${SPACING.SM}px`,\n                padding: isMobile ? `${SPACING.SM}px ${SPACING.SM}px` : `${SPACING.SM}px ${SPACING.MD}px`,\n                cursor: \"pointer\",\n                transition: getSmoothTransition(\"all\", \"normal\"),\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: hexToRgbaString(KOREAN_COLORS.TEXT_PRIMARY),\n                width: \"100%\",\n                transform: isHovered ? \"scale(1.03)\" : \"scale(1)\",\n                boxShadow: glowEffect,\n              }}\n              onMouseEnter={() => setHoveredLayer(config.id)}\n              onMouseLeave={() => setHoveredLayer(null)}\n              data-testid={`anatomy-layer-${config.id}`}\n              aria-label={`Toggle ${config.english} layer`}\n              aria-pressed={isActive}\n            >\n              {/* Icon */}\n              <span\n                style={{\n                  fontSize: isMobile ? \"18px\" : \"20px\",\n                  filter: isActive ? \"none\" : \"grayscale(100%)\",\n                  opacity: isActive ? 1 : 0.5,\n                }}\n              >\n                {config.icon}\n              </span>\n\n              {/* Labels */}\n              <div\n                style={{\n                  flex: 1,\n                  textAlign: \"left\",\n                }}\n              >\n                <div\n                  style={{\n                    fontSize: isMobile ? \"12px\" : \"13px\",\n                    fontWeight: \"bold\",\n                    color: isActive ? layerColor : hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),\n                  }}\n                >\n                  {config.korean}\n                </div>\n                <div\n                  style={{\n                    fontSize: isMobile ? \"9px\" : \"10px\",\n                    color: isActive \n                      ? hexToRgbaString(KOREAN_COLORS.TEXT_SECONDARY) \n                      : hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, 0.6),\n                  }}\n                >\n                  {config.english}\n                </div>\n              </div>\n\n              {/* Active indicator */}\n              <div\n                style={{\n                  width: isMobile ? \"8px\" : \"10px\",\n                  height: isMobile ? \"8px\" : \"10px\",\n                  borderRadius: \"50%\",\n                  background: isActive ? layerColor : hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, 0.2),\n                  boxShadow: isActive ? `0 0 10px ${layerColor}` : \"none\",\n                }}\n              />\n            </button>\n          );\n        })}\n      </div>\n\n      {/* Info text */}\n      <div\n        style={{\n          marginTop: `${SPACING.MD}px`,\n          paddingTop: `${SPACING.MD}px`,\n          borderTop: `1px solid ${hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY, 0.1)}`,\n          fontSize: isMobile ? \"9px\" : \"10px\",\n          color: hexToRgbaString(KOREAN_COLORS.TEXT_TERTIARY),\n          textAlign: \"center\",\n          lineHeight: \"1.4\",\n          fontFamily: FONT_FAMILY.KOREAN,\n        }}\n      >\n        {formatBilingualText(\"클릭하여 표시/숨김\", \"Click to show/hide\", \"pipe\")}\n      </div>\n    </div>\n  );\n},\n(prevProps, nextProps) => {\n  // Re-render when visible layers or callback changes\n  // Including callback prop prevents stale closures when parent provides\n  // a new function that captures updated state.\n  return (\n    prevProps.visibleLayers === nextProps.visibleLayers &&\n    prevProps.isMobile === nextProps.isMobile &&\n    prevProps.onLayerToggle === nextProps.onLayerToggle\n  );\n});\n\nAnatomyControlsOverlayHtml.displayName = \"AnatomyControlsOverlayHtml\";\n\nexport default AnatomyControlsOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/training/components/AnatomyOverlay3D.d.ts

@@ -0,0 +1,31 @@
+/**
+ * AnatomyOverlay3D - Toggleable anatomy visualization layers
+ *
+ * Provides skeleton, nerves, vascular, and surface anatomy overlays
+ * for educational training visualization
+ */
+import React from "react";
+/**
+ * Anatomy layer types
+ */
+export type AnatomyLayer = "skeleton" | "nerves" | "vascular" | "surface";
+/**
+ * Props for AnatomyOverlay3D component
+ */
+export interface AnatomyOverlay3DProps {
+    /** Position of the anatomy overlay (typically the dummy position) */
+    readonly position: [number, number, number];
+    /** Which anatomy layers to display */
+    readonly visibleLayers: readonly AnatomyLayer[];
+    /** Opacity of the overlay (0-1) */
+    readonly opacity?: number;
+    /** Whether on mobile device (reserved for future mobile-specific optimizations) */
+    readonly isMobile?: boolean;
+}
+/**
+ * AnatomyOverlay3D Component
+ * Main component that manages all anatomy layers
+ */
+export declare const AnatomyOverlay3D: React.FC<AnatomyOverlay3DProps>;
+export default AnatomyOverlay3D;
+//# sourceMappingURL=AnatomyOverlay3D.d.ts.map

package/lib/components/screens/training/components/AnatomyOverlay3D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnatomyOverlay3D.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/training/components/AnatomyOverlay3D.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAqC,MAAM,OAAO,CAAC;AA8B1D;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1E;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,qEAAqE;IACrE,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5C,sCAAsC;IACtC,QAAQ,CAAC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAC;IAChD,mCAAmC;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAggBD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+B5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}