%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    autonumber
    participant U as Editor/User
    participant FE as Frontend (React)
    participant BE as Backend API
    participant FS as File Storage (uploads dir)
    participant DB as Postgres

    Note over U,FE: Drag & drop / select image
    U->>FE: Choose file
    FE->>BE: POST /api/v1/upload (multipart/form-data)
    BE->>BE: RateLimit(30/min), size/type validation
    BE->>FS: Save file to UPLOAD_DIR
    BE->>DB: Insert UploadedFile + FileUsage (if provided)
    BE-->>FE: 200 OK {url, id}

    rect rgba(230,255,230,0.2)
    Note over U,BE: Quick edits / crop (editor role required)
    FE->>BE: POST /api/v1/image-processing/process | crop-upload | quick-edit
    BE->>BE: JWTAuth + CSRF + RoleAuth(editor)
    BE->>FS: Read/transform/write
    BE->>DB: Track usages/updates
    BE-->>FE: 200 OK {url}
    end