example: add on interaction end example (tldraw#7143)

An example showing how you could use a callback with `onInteractionEnd`

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds a new example demonstrating `onInteractionEnd` to control
behavior after translating a newly created shape.
> 
> - **Examples**:
> - Add
`apps/examples/src/examples/interaction-end-callback/InteractionEndExample.tsx`
showcasing a custom `QuickShapeTool` that:
> - Creates a `geo` shape on pointer down, switches to
`select.translating`, and uses `onInteractionEnd` to update the shape's
`fill` to `pattern` and return to `quick-shape`.
> - Add `apps/examples/src/examples/interaction-end-callback/README.md`
documenting usage of `onInteractionEnd` for translate/resize/rotate
interactions.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ecafafb. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: kostyafarber

apps/examples/src/examples/interaction-end-callback/InteractionEndExample.tsx

@@ -0,0 +1,68 @@
+import { StateNode, TLGeoShape, TLPointerEventInfo, Tldraw, createShapeId } from 'tldraw'
+import 'tldraw/tldraw.css'
+
+// [1]
+class QuickShapeTool extends StateNode {
+	static override id = 'quick-shape'
+
+	override onEnter() {
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
+	}
+
+	override onPointerDown(info: TLPointerEventInfo) {
+		const { currentPagePoint } = this.editor.inputs
+		const shapeId = createShapeId()
+
+		this.editor.createShape<TLGeoShape>({
+			id: shapeId,
+			type: 'geo',
+			x: currentPagePoint.x - 50,
+			y: currentPagePoint.y - 50,
+			props: { w: 100, h: 100, fill: 'solid' },
+		})
+
+		this.editor.setSelectedShapes([shapeId])
+
+		// [2]
+		this.editor.setCurrentTool('select.translating', {
+			...info,
+			target: 'shape',
+			shape: this.editor.getShape(shapeId),
+			isCreating: true,
+			// [3]
+			onInteractionEnd: () => {
+				// Change fill to semi-transparent after dragging
+				this.editor.updateShape<TLGeoShape>({
+					id: shapeId,
+					type: 'geo',
+					props: { fill: 'pattern' },
+				})
+				// Return to our custom tool
+				this.editor.setCurrentTool('quick-shape')
+			},
+		})
+	}
+}
+
+export default function InteractionEndExample() {
+	return (
+		<div className="tldraw__editor">
+			<Tldraw tools={[QuickShapeTool]} initialState="quick-shape" hideUi />
+		</div>
+	)
+}
+
+/*
+[1]
+Create a simple tool that creates shapes on click. This demonstrates using
+onInteractionEnd to control what happens after the user drags the new shape.
+
+[2]
+After creating the shape, transition to the translating state so the user can
+immediately position it.
+
+[3]
+Pass a function as onInteractionEnd to execute custom logic when dragging ends.
+Here we change the shape's fill style and return to our custom tool. You can also
+pass a string like 'quick-shape' or 'select.idle' to simply transition to that tool.
+*/

apps/examples/src/examples/interaction-end-callback/README.md

@@ -0,0 +1,15 @@
+---
+title: Interaction end callback
+component: ./InteractionEndExample.tsx
+category: editor-api
+priority: 4
+keywords: [callback, interaction, drag, resize, rotate, tool]
+---
+
+Control behavior after dragging, resizing, or rotating shapes.
+
+---
+
+When programmatically starting interactions like translating, resizing, or rotating, you can use the `onInteractionEnd` option to control what happens when the interaction completes. Pass a string to transition to a specific tool, or a function to execute custom logic.
+
+In this example, we set the fill of a shape after we finish translating to be patterned.