Design Document:

1. Structure
   - Body contains a navigation bar for slides, a slides container, and a hidden design doc.
   - Each slide is a div with absolute positioning, only one visible at a time.
   - Images are wrapped in a .image-wrapper div to manage transform and handles.

2. Styling
   - Beige background, no text selection.
   - Handles are hidden until image is hovered.
   - Images have 1px solid black border.
   - Slides container height set to 80vh.

3. JavaScript
   - Clipboard paste event reads image data from clipboard and inserts at cursor.
   - Inserted image is wrapped with .image-wrapper, positioned at paste location.
   - Default scale set to 1/3 page width, maintaining aspect ratio.
   - Dragging uses pointer events; movement accounts for current rotation.
   - Resize via bottom-right handle; scale factor adjusts both width and height, maintaining aspect ratio.
   - Rotate via top-center handle; rotation angle set from pointer movement around image center.
   - Double-click deletes image.
   - z-index updated on selection.
   - Slide navigation toggles visibility of slides.

4. Mobile Support
   - Uses pointer events for unified mouse/touch handling.
   - All handles and actions are touch-friendly.