feat: drag-and-drop multi-image import onto canvas

[trmquang93]

Summary

• Drag multiple PNG/JPG files from Finder onto the canvas to bulk-create screens in a single gesture
• Screens auto-arranged in a grid from the drop point with dynamic row heights (based on tallest image per row) and anti-overlap detection against existing screens
• Screen names derived from filenames (e.g., "login_page.png" -> "Login Page")
• Drop zone overlay with dashed border appears during drag
• Toast notification confirms number of screens created
• Entire batch is a single undo/redo step

Changes

• New: src/utils/dropImport.js -- filenameToScreenName(), gridPositions(), resolveOverlaps() pure utilities
• New: src/components/Toast.jsx -- minimal fixed-position auto-dismiss toast
• Modified: src/hooks/useScreenManager.js -- addScreensBatch() for single-undo batch creation, rewrote handleCanvasDrop() with image dimension loading, grid positioning, and overlap resolution
• Modified: src/Drawd.jsx -- toast state, drag-over state with enter/leave counter, world coordinate computation
• Modified: src/components/CanvasArea.jsx -- drop zone overlay, onDragEnter/onDragLeave handlers
• Modified: src/constants.js -- added DROP_OVERLAP_MARGIN

Test plan

• All 316 tests pass (npm test)
• Lint clean (npm run lint)
• Production build succeeds (npm run build)
• Manual: drag 3+ images onto canvas, verify grid placement with varying image sizes
• Manual: drag images onto canvas with existing screens, verify no overlaps
• Manual: verify single undo removes all dropped screens
• Manual: verify toast notification appears and auto-dismisses
• Manual: verify drop zone overlay appears/disappears during drag