Refactor useDrawing.ts: Modularize Drawing Hook and Separate Concerns

[snjsomnath]

Current Issues with useDrawing.ts (713 lines):

• Handles all drawing functionality in one massive hook.
• Complex state management for preview, validation, and completion.
• Mixed drawing logic with UI state management.
• Performance-critical code mixed with business logic.

Recommended Modularization Structure:

drawing/
├── index.ts (main hook)
├── hooks/
│   ├── useDrawingState.ts
│   ├── useDrawingPreview.ts
│   ├── useDrawingValidation.ts
│   └── useDrawingCompletion.ts
├── services/
│   ├── DrawingPreviewService.ts
│   ├── DrawingValidationService.ts
│   └── SnapService.ts
└── utils/
    ├── drawingCalculations.ts
    └── drawingHelpers.ts

Actionable Steps:

1. Extract state, preview, validation, and completion logic into separate hooks under hooks/.
2. Move preview, validation, and snapping logic into dedicated services.
3. Refactor calculations and helpers into utils/.
4. Use index.ts as the main hook orchestrator that composes these modules.
5. Gradually migrate logic from useDrawing.ts into new modules for improved maintainability and performance.