feat: Add animated arrows and highlight boxes for Typst preview

[Copilot]

This PR implements a comprehensive annotation system that allows users to draw and position absolutely positioned arrows and highlight boxes on Typst document previews, with support for keyframe-based animations.

Overview

The feature provides an interactive overlay system for adding visual annotations to Typst documents without modifying the original source files. Users can create animated arrows and highlight boxes that help emphasize content during presentations or documentation reviews.

Key Features

Drawing Tools

• Arrow Tool: Draw arrows with customizable start/end points, thickness, arrowhead size, and styling
• Highlight Box Tool: Create rectangular highlight areas with adjustable dimensions, colors, and corner radius
• Real-time Editing: Drag-and-drop positioning with visual feedback and property customization

Animation System

• Keyframe-based Animations: Create smooth animations with multiple property states over time
• Built-in Presets: Fade in/out, pulse, move, color change, and scale animations
• Timeline Controls: Play, pause, step, seek, and loop functionality with variable playback speed
• Property Interpolation: Smooth transitions for position, color, opacity, and dimensions

User Interface

• Responsive Toolbar: Tool selection and animation controls that adapt to screen size
• Properties Panel: Real-time customization of selected annotations
• Context Menus: Right-click actions for quick animation creation and annotation management
• Keyboard Shortcuts: Efficient workflow with Ctrl+Shift+A to toggle mode, tool selection shortcuts

Technical Implementation

Frontend (tools/typst-preview-frontend/)

• SVG Overlay System: Non-intrusive rendering that doesn't interfere with document content
• Animation Engine: RequestAnimationFrame-based smooth animation with easing functions
• Event-driven Architecture: Clean separation between annotation management, UI, and animation systems

Backend (crates/typst-preview/)

• Annotation Storage: Async Rust-based storage system with JSON serialization
• WebSocket Protocol Extension: Real-time synchronization between frontend and backend
• Message Routing: Cross-component communication for annotation lifecycle management

VS Code Extension (editors/vscode/)

• Command Integration: Command palette support with tinymist.toggleAnnotationMode and tool selection
• Workspace Persistence: Annotations saved in .vscode/tinymist-annotations/ for version control compatibility
• Settings Sync: User preference management and keyboard shortcut customization

Data Format

Annotations use a transparent JSON format that's completely separate from Typst documents:

{
  "version": "1.0.0",
  "documentId": "/path/to/document.typ",
  "annotations": [
    {
      "id": "arrow1",
      "type": "arrow",
      "start": {"x": 100, "y": 100},
      "end": {"x": 200, "y": 200},
      "color": "#ff0000",
      "thickness": 2
    }
  ],
  "animations": [
    {
      "annotationId": "arrow1",
      "keyframes": [
        {"time": 0, "properties": {"opacity": 0}},
        {"time": 1000, "properties": {"opacity": 1}}
      ],
      "duration": 1000,
      "easing": "ease-in-out"
    }
  ]
}

Usage Examples

Basic Annotation

1. Press Ctrl+Shift+A to enable annotation mode
2. Select arrow or highlight tool from toolbar
3. Click and drag to create annotation
4. Use properties panel to customize appearance

Animation Creation

1. Right-click on any annotation
2. Select animation preset (fade in, pulse, etc.)
3. Use timeline controls to preview animation
4. Export animations for sharing or presentation

Benefits

• Non-intrusive: Annotations don't modify original Typst documents
• Version Control Friendly: JSON storage format works seamlessly with Git
• Collaborative: Easy sharing through export/import functionality
• Performance Optimized: Efficient SVG rendering and batched WebSocket communication
• Accessible: Supports high contrast themes, reduced motion, and keyboard navigation

This implementation provides a production-ready annotation system that enhances the Typst preview experience with interactive visual elements, making it ideal for educational content, documentation, and collaborative reviews.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[jdupak-ms]

I don't want the annotations to be separate from the document, I want to use native typst functionality that will work with unmodified typst compiler.

Ideally, for any absolutely positioned box, I want to be able to move it using the preview gui, plus I want to be able to create new overlay elements from the preview. Those should be placed at the end of the given page in the source code.