annotate ui events example (#2460)

annotate ui events example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate ui events example

apps/examples/src/examples/ui-events/UiEventsExample.tsx

@@ -2,6 +2,8 @@ import { TLUiEventHandler, Tldraw } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 import { useCallback, useState } from 'react'
 
+// There's a guide at the bottom of this file!
+
 export default function UiEventsExample() {
 	const [uiEvents, setUiEvents] = useState<string[]>([])
 
@@ -36,3 +38,18 @@ export default function UiEventsExample() {
 		</div>
 	)
 }
+
+/* 
+This example shows how to listen to UI events. This includes includes things like selecting a tool,
+grouping shapes, zooming etc. Events are included even if they are triggered by a keyboard shortcut.
+However, interactions with the style panel are not included. For a full list of events and sources,
+check out the TLUiEventSource and TLUiEventMap types.
+
+We can pass a handler function to the onUiEvent prop of the Tldraw component. This handler function
+will be called with the name of the event and the data associated with the event. We're going to 
+display these events in a list on the right side of the screen.
+
+To listen to canvas events or changes to the store, check out the canvas events and store events 
+examples.
+
+*/