Augmentation-based shape and binding types (tldraw#7091)

continues the work done in tldraw#6739

### Change type

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

### Test plan

1. Tested manually in
https://github.com/Andarist/tldraw-augmentation-test
2. The most complex `TLIndexedShapes` also tested manually in [TS
playground](https://www.typescriptlang.org/play/?ts=6.0.0-dev.20251027#code/JYOwLgpgTgZghgYwgAgCoBkBCcDOEDKAFnAA4QA8qAnmQDTIAKUA9iTgHzIDeAUMsmBoQAXGiEBuPshIs2opqxySAvjx6CyadAEEoLAO5FSKALxbseI2XIAiOHub6b9LsgAmwKKJxgooAObIyuySGigYmMwAHlam5rgExNY2AEbRztzIUaIgAK4AtinQ4shUOQVFUEEh6kJaAML2brHIZhEJsbYITRmuCMwANsxeyD5+IIHBoXUYAOIsuSQtbVgdSRQ2-gskvcjAbt6+AdXTmhgAavsQzMvxluu2AG5XzLtgwPkiyHmFxdIDcCoAVEaUGEDgIBOajCWgAIhB4LkBmBllIAD5aXQGWLo8zRHH8DEYRpQZrrXFzbYE5BE9CXNzXWKSHgQKIkYZgPbgaDwJBaWZDFJwAaxBRsACypG4qhZbI5XMgsEQ4XQAuYQpF6zFOElJG4Um6pPKAwGJQA9GbkKyEANcgzkPpgGBCMh4AMcFQDbkfMx8qJXEKAF4BOCHcaTc2W1mQEBuB1Ol1wZD9fIkAYQSADKjJ71gX2jcn8Z4M5j+gQfL4-SolNOA4HIUHpiElYVgVDRsPHZSRq1RGNxhmI5EF4xSLbMRbG03IC17MAAchwyCT-SgKBw63oTuTEPnnKK7mAODgKXTbjNzEe0D8DJAPBlrPZUE5MIwAElY6yIGTjEuzLx+FnAB1FAnWgOBIGQS9oGXZBchAYBmEhZgYGXXJ-E+bk4wAawgKglwhAcETgJFOQ3YwBCEHAADopFnVBCCPZcTUcJdvQEZguRtO0UAACmGZMkI8d4kOFLNe24+0BOgvQrgASgEQgUEHEjh3Isgl1AKCQBQfxmFowCzToy0P0UlAAANcHM5MAW9FB9BQewUBgYBkWgY4J05Dxj1Pb8Rw0gzkAAbQAaS5KRCWQXCqBQ-lBWFUVZB1UgIppOFiNI2IgpsMIbAAXWXJcwujCBYyXDB4SHFF1my3K8tSgB+GdLVXdd1gItdmP0QECMeOBXJPdNl1jHcQBAZh9xQGSb1vUZOIc5AACtcy4217WdCB8lS-hir7Uq3CXTZthsbbkCakLTtEXb+yXaLYrmeLNWMbVdVOprZ2AVDtxKsrYLyE0jxdPrbRQDa4LwKpiCXbzBr850mPU0G6hwebnNcxU5yg3JOUdZ1vggK8oFO-gHvVBKtSS3VQoKn6Du+JEBjS+DB1Ab9ibO-HCfZq7LuQC7+H4K68qu3sbuQI6Jx2RrmsEzrEY6xyBm6-Dlz6gbfOGuNujGiaGymwmZtKuaHRQZafFWnizK2gWBYAUT7KBEDASh0Eq1TquMFxKLIEXglSkXafK12MuRLKcqEfLpY+r6FwI9wQ7I9ZvfslAdLhziECUhBsL2GPFz1o3pv2W9Tuu-bbrw+7VUexLFFem3+Hey1PsxqGC+Qg2rkhDbITssycx9fJ-OUhFQCdRC7wbgX2nuYxyBC+hSY1WuJVIan2F56PW9wb5daKQvO9mnvkDXPvWSPd4JmT5jgASJcYAEoowAxmFvNrT0p-4e3fCdl23cyzcmQwi+w3jbUQs4+5gwQLmfMiN44uQQiJSeDcZ6JDngvOKZMnpkBemvMKAAyKKldUJL3Js9SmpA8o1G7GoWca4UYDCvHGd8n4ojfliDgYQPALTcMtK+dAH4GRsJ-BpVo+pZw22gYPUQqDOg2CkXmfIuxZwKNgeSCRn8gwhk7BMSQGj+BTF4Q3Ys1wZGrFnskExrwvazgAFS02-LY5AVijGf3LJ8covwoB6MtG49+9ZGzghAD4txzE2wdlGEcXRriBaGP0cuBw+gzFYkcEyGWrUEkGBifwNI2Q8QxHWD2DJuSjGqFnLOWEAB5W2+AABy85UDIGIFeZA9ioiSUcTuUkPAgA)
(previous iteration can be found in: [TS
playground](https://www.typescriptlang.org/play/?ts=6.0.0-dev.20251027#code/JYOwLgpgTgZghgYwgAgCoBkBCcDOEDKAFnAA4QA8qAnmQDTIAKUA9iTgHzIDeAUMsmBoQAXGiEBuPshIs2opqxySAvjx6CyadAEEoLAO4K2yALzdkAE2BRROMFFABzZKo0oMug0VIozGbHjeZOQA5HB6zPoh9B4RhrIc6kJamMwAHkY4puZpoiAArgC2AEbQ4shUeUWlUC5Jmv7pQb4puATEwSHF6dEp6Zns9e7oAMLhFpnZXMgIzAA2zDbIdg4gzq7JGGNQFs3Z-m3NoQjjvVvjA0NaAGrAFhDMk2bTYMCFIsgFJWXSc3BUTlE3XmEDgIDqbhudweez8WEOHQoIQAbtDmGd0Ld7o8EoMrhgACIQeD5OZgWFaTyRPYAHz6aVpWm2u0RyDpGCxMMRanuCD+UBQsxAdgEcxGi3aPlE+RAwAAjvkUDgqCV5jwIGkSIswAJkuKBUdUJw-GzdWRmDBRfrJZoAPS2mYS5aIrInEAgZg60rIZjI6AOCz3EA8Xn8wXMYU6sBzIkksnNaWyhVKlXdObqzXas0oADyfqg+gcYDgxTmEFjcFJ5MRlGNaFNBTmc1NMvuMFAEAsprcFtFFarzTUoEgsEQw378cRmQAsqRuFJwgZRHnoIXgMXS+XiZXJz5KDo4gNJPwTjtl-m1xuyxPq3vzjsj1JurlkNbDVh+rjj8hUdjz6uixLa9twHGsOTRR9VAzLUoB1YdoHgJAtAAcQWYo4DmZoZznDVIBACwskJEDdzIbCSG4KCNRguDwAQscULQjCsISWdyN4E9xiqJtyntZANT5fJ7mQfR10IZB4DmZUpAQfI7GYQpRGmdCAC8nDgWx7CcFweIdXCIHw4TROQOBHUKEgy0gOYqBmWSwHk50fCkX8HkUgQ3g+L4anKcz-kBZBgTLMFygwsBUFwjTVnWHS+LSPCu1AYzTJIOBXk3YT-h4SjM1g5B4NHJCMFQ5h0MwqcWLned+F4xdIlc-RiEgfMIq05RkF40BZjMlLgDSvThWACMZgFFKICyME+IiWpgEtKhmHyZAZU695wFysBMrUKis0hDAAEl8I1TtmiyZ4eAASHa8EwEIFAAANcBumY-lklB9BesEo2YcTgDJaAfXyHUrBwIDOwcsgcDOgBtABpXLwQAawgWbLUKxjSp8MjjKyGG+oI5AEaRrQb2YxRWLO06AH42odWYBVB0bjNpjD9H+MbkTgb7geMgy3Q9L0UF9f07iDZZPte5AACtbNhgShKuiBCjJ06e0taM31ZHHCPQImypJ0hoYAXUVymocV0R2stdcYrisbPlJOZgBwMS2bmRUBGuha8FqYgskB4Guyuh26ezEXhJQdsfqmnU5p1ESrs+CB80V06UeKpidbYViDat-TccbZs6VbYkOwsJPKZABPoCT0QTdO07q-1s3qadR2fDGxm5mZqhWfZv40rBLsec9fz+fzAMgzO7HYpzrJ8d7aZoYAJlhvHEd7Ii41vUjyvI3Bs17VWJT2DXCeIzeIDIxf9eQY2l7yCuoAbk+N+JjO9ahher9UWvKYAUViqBEBgH3NrHw9AXhCGri4QYtdRBVQdNNN2KZVTNkDnYb6zY5YCnoJbd4YIshyw9r9b2nwh4CwLEWPCq1Fa8RujDAAZCvAm68dxnzIg9TSCA4a5SyM9Ls11aZ2T4sKfIAjCCB2KAAkACAxIRissZEg5lgD00EQQtsLCg5uBwLQahDpPT8JEngGyclCg+nLj7Iu5cuz2wRsgG6JBQCKWUA9fQc05hdmSjgfBYjXTXU4YrZWfZT5HynvhTWRUSovxwJnehjC15ayCenKJpBDa1wpvwKmHstI3QOIEGsUN6B-xlhQcJad0bbwNvQPOLZ9rtksd2IQ+8YwJJ8OwdgzjXFdhcVALh-CIBJ14sUf6AhPqFDgDYyEgMfJd2QIUJ0QoEAOwgPQMWz1EGOj0KNLU+EtJtmLsHDCwA2jg1SadP+9hAHAOaXQcwbhIHKGgTA9JvFakYSssslAw1pFrJksYumWRen0FUQ7P2fzQ7t2GhYay4cRwg2jv5ayBC7o4AenySseAk45JtBQfJyAAByEZcV22BvuEpaMt66xIAbVp60eC8QFDgeYfouy7X2mkQ6LphC0ttFy4OLL7hspZK3KYPL0lGLsgpVouS9wACIfniulWAjJcr7ItzICK0V6SVJqWamsSQvFRX3L1Q6UVzlmCiExUcaVpqFXmF4gAKhxp2O1P40Tqo1W5d4VRvhQCNe69JUy-IBVBCAX1frjJkjCrFHVjhQ3pMNW6hmS5KRxGaNFGmKAar6ATc+c1H4GSIjTU6Z8PLVC8V4gSHMP98C4pCKgZAxA-TIAdWkIpFhnWngsEAA))

### Description

The main goal of this PR is to allow users to provide users to strictly
type all their custom shapes' props.

Previously people would have to resort to using an unknown shape,
casting, or "casting" through generics (where tldraw types would just
accept their type arguments happily). With the new system in place users
can augment a builtin tldraw interface like this:
```ts
const CIRCLE_CLIP_TYPE = 'circle-clip'

declare module 'tldraw' {
	export interface TLGlobalShapePropsMap {
		[CIRCLE_CLIP_TYPE]: {
			w: number
			h: number
		}
	}
}

export type CircleClipShape = TLShape<typeof CIRCLE_CLIP_TYPE>
```

Once this is done, users can now use the shape type like this:
```ts
editor.updateShape({
	id: shapeId,
	type: 'circle-clip',
	props: {
		w: 100,
		h: 100,
	},
})
```

Thanks to the power of discriminated unions, this will now error if the
user tries to update the shape with the wrong props.

That said, for the time-being, I kept generic parameters in the editor
methods to:
- maintain backwards compatibility
- keep this documented pattern working:
https://tldraw.dev/docs/shapes#Meta-information

⚠️ this allows users to bypass the created augmentation system
and locally call methods with shapes having *more* properties than
prescribed by the augmentation system. Given the TS structural type
system... this is something that can always happen when arguments are
not passed inline so it's largely fine as the users should start using
the new system anyway. This should allow them to do it gradually though.

This PR consists of:
- the mentioned augmentation system. Related changes are mostly local to
[`TLShape`
file](https://github.com/tldraw/tldraw/pull/7091/files#diff-74a7534c2bdfff2f6ef9e068496c69dca2a7b09d05c1ff482485fd30480694d3)
- using the new system in the
[examples](https://github.com/tldraw/tldraw/pull/7091/files#diff-5f23c6b955fcdcf8a402446d96178e12241ca0cb01af4e73535cc1ca261f81f0),
[templates](https://github.com/tldraw/tldraw/pull/7091/files#diff-5845112b17d3eb903a41e90e834858e5b8ab71b6350348811d183137824e4f07)
and tests
- updating the docs to reflect the new system
[here](https://github.com/tldraw/tldraw/pull/7091/files#diff-1b0ad2aab7ced6fc26f40f9929d2d16269b8fa505bdf4b18b5b746facc5bcefc)
and in the "guides" in the examples
- followup code changes required by the new system, they can be found
all over the place.
- the same kind of changes related to the bindings (this PR includes the
work done in tldraw#7133 )

### API changes

Numerous typings changes! make @ds300 compile a list

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Introduces module-augmentation-driven typing for custom shapes and
bindings, updates core editor APIs and utilities to support it, and
migrates docs, examples, templates, and tests accordingly.
> 
> - **Types & Schema**:
> - Add `TLGlobalShapePropsMap`/`TLGlobalBindingPropsMap`,
`TLIndexedShapes`/`TLIndexedBindings`, `ExtractShapeByProps`, and
`TLCreateShapePartial`.
> - Refactor `TLBaseShape`/`TLBaseBinding` and shape/binding record
validators to work with augmented types.
> - **Editor API**:
> - Overload `getShapeUtil`, `isShapeOfType`, and `getBindings*` for
typed shape/binding keys.
> - Update `createShape(s)`/`updateShape(s)` generics and accept typed
partials.
> - Tighten types across selection, snapping, export, reparenting, etc.
> - **Bindings**:
> - Generic `BindingUtil`/callbacks now use typed `TLBinding`;
connection/arrow binding utilities updated.
> - **Docs & Guides**:
> - Rewrite shape/binding guides to use module augmentation
(`TLShape<typeof TYPE>`), update API docs.
> - **Examples & Templates**:
> - Migrate all examples and app templates to declare module
augmentations and use typed shapes; remove legacy generic casts.
> - **Tests**:
> - Update tests to new typing model and API overloads; add tests for
type narrowing and create/update generics.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ac324a6. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Andarist

apps/docs/content/docs/editor.mdx

@@ -476,19 +476,29 @@ To create a binding of your own, you can define a custom binding.
 
 #### The binding type
 
-First, you need to create a type that describes what the binding object will look like:
+First, we register the binding's props using TypeScript module augmentation:
 
 ```ts
-import { TLBaseBinding } from 'tldraw'
+const STICKER_TYPE = 'sticker'
 
-type StickerBinding = TLBaseBinding<'sticker', { x: number; y: number }>
+declare module 'tldraw' {
+	export interface TLGlobalBindingPropsMap {
+		[STICKER_TYPE]: { x: number; y: number }
+	}
+}
+```
+
+Then, we can extract the binding type using `TLBinding`:
+
+```ts
+import { TLBinding } from 'tldraw'
+
+type StickerBinding = TLBinding<typeof STICKER_TYPE>
 ```
 
-With [TLBaseBinding](?) we define the binding's type (`sticker`) and `props` property (`{x: number,
-y: number}`). The type can be any string, and the props must be a plain JSON object (ie not a class
-instance).
+The type can be any string but the props must be a regular [JSON-serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description) JavaScript object.
 
-The [TLBaseBinding](?) helper adds the other base properties like `id`, `toId`, and `fromId`.
+The created binding types extend [TLBaseBinding](?) and thus include all the base properties of a binding, such as `id`, `toId`, and `fromId`.
 
 #### The `BindingUtil` class
 

apps/docs/content/docs/shapes.mdx

@@ -95,15 +95,29 @@ You can create your own custom shapes. In the examples below, we will create a c
 
 In tldraw's data model, each shape is represented by a JSON object. Let's first create a type that describes what this object will look like.
 
+First, we register the shape's props using TypeScript module augmentation:
+
 ```ts
-import { TLBaseShape } from 'tldraw'
+const CARD_TYPE = 'card'
 
-type CardShape = TLBaseShape<'card', { w: number; h: number }>
+declare module 'tldraw' {
+	export interface TLGlobalShapePropsMap {
+		[CARD_TYPE]: { w: number; h: number }
+	}
+}
 ```
 
-With the [TLBaseShape](?) helper, we define the shape's `type` property (`card`) and the shape's `props` property (`{ w: number, h: number }`). The type can be any string but the props must be a regular [JSON-serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description) JavaScript object.
+Then, we can extract the shape type using `TLShape`:
 
-The [TLBaseShape](?) helper adds the other base properties of a shape, such as `x`, `y`, `rotation`, and `opacity`.
+```ts
+import { TLShape } from 'tldraw'
+
+type CardShape = TLShape<typeof CARD_TYPE>
+```
+
+The type can be any string but the props must be a regular [JSON-serializable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description) JavaScript object.
+
+The created shape types extend [TLBaseShape](?) and thus include all the base properties of a shape, such as `x`, `y`, `rotation`, and `opacity`.
 
 ### Shape Util
 
@@ -112,10 +126,12 @@ While tldraw's shapes themselves are simple JSON objects, we use [ShapeUtil](?)
 Let's create a [ShapeUtil](?) class for the shape.
 
 ```tsx
-import { HTMLContainer, ShapeUtil } from 'tldraw'
+import { HTMLContainer, Rectangle2d, ShapeUtil } from 'tldraw'
+
+// ...
 
 class CardShapeUtil extends ShapeUtil<CardShape> {
-	static override type = 'card' as const
+	static override type = CARD_TYPE
 
 	getDefaultProps(): CardShape['props'] {
 		return {

apps/dotcom/client/src/fairy/actions/LabelActionUtil.ts

@@ -1,8 +1,22 @@
 import { LabelAction, Streaming } from '@tldraw/fairy-shared'
-import { TLShapeId, toRichText } from 'tldraw'
+import { ExtractShapeByProps, TLRichText, TLShape, TLShapeId, toRichText } from 'tldraw'
 import { AgentHelpers } from '../fairy-agent/agent/AgentHelpers'
 import { AgentActionUtil } from './AgentActionUtil'
 
+type ShapeWithRichText = ExtractShapeByProps<{ richText: TLRichText }>
+
+function isShapeWithRichText(shape: TLShape | null | undefined): shape is ShapeWithRichText {
+	return !!(shape && 'richText' in shape.props)
+}
+
+function assertShapeWithRichText(
+	shape: TLShape | null | undefined
+): asserts shape is ShapeWithRichText {
+	if (!isShapeWithRichText(shape)) {
+		throw new Error('Shape is not a valid ShapeWithRichText')
+	}
+}
+
 export class LabelActionUtil extends AgentActionUtil<LabelAction> {
 	static override type = 'label' as const
 
@@ -17,8 +31,17 @@ export class LabelActionUtil extends AgentActionUtil<LabelAction> {
 		if (!action.complete) return action
 
 		const shapeId = helpers.ensureShapeIdExists(action.shapeId)
-		if (!shapeId) return null
-
+		if (!shapeId || !this.agent?.editor) {
+			return null
+		}
+		const shape = this.agent.editor.getShape(`shape:${shapeId}` as TLShapeId)
+		if (!shape) {
+			return null
+		}
+		if (!isShapeWithRichText(shape)) {
+			console.warn(`Shape type "${shape.type}" does not support richText labels`)
+			return null
+		}
 		action.shapeId = shapeId
 		return action
 	}
@@ -30,11 +53,7 @@ export class LabelActionUtil extends AgentActionUtil<LabelAction> {
 
 		const shapeId = `shape:${action.shapeId}` as TLShapeId
 		const shape = editor.getShape(shapeId)
-		if (!shape) return
-		if (!('richText' in shape.props)) {
-			console.warn(`Shape type "${shape.type}" does not support richText labels`)
-			return
-		}
+		assertShapeWithRichText(shape)
 
 		editor.updateShape({
 			id: shapeId,

apps/dotcom/client/src/fairy/actions/PenActionUtil.ts

@@ -1,5 +1,5 @@
 import { PenAction, Streaming, asColor, convertFocusFillToTldrawFill } from '@tldraw/fairy-shared'
-import { TLDrawShape, TLDrawShapeSegment, Vec, VecModel, createShapeId, last } from 'tldraw'
+import { TLDrawShapeSegment, Vec, VecModel, createShapeId, last } from 'tldraw'
 import { AgentHelpers } from '../fairy-agent/agent/AgentHelpers'
 import { AgentActionUtil } from './AgentActionUtil'
 
@@ -77,7 +77,7 @@ export class PenActionUtil extends AgentActionUtil<PenAction> {
 			},
 		]
 
-		this.agent.editor.createShape<TLDrawShape>({
+		this.agent.editor.createShape({
 			id: createShapeId(),
 			type: 'draw',
 			x: minX,

apps/dotcom/client/src/tla/components/TlaEditor/useExtraToolDragIcons.ts

@@ -1,11 +1,5 @@
 import { useMemo } from 'react'
-import {
-	DefaultSizeStyle,
-	onDragFromToolbarToCreateShape,
-	TLDrawShape,
-	TLUiOverrides,
-	VecModel,
-} from 'tldraw'
+import { DefaultSizeStyle, onDragFromToolbarToCreateShape, TLUiOverrides, VecModel } from 'tldraw'
 import { trackEvent } from '../../../utils/analytics'
 
 export function useExtraDragIconOverrides() {
@@ -16,7 +10,7 @@ export function useExtraDragIconOverrides() {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => {
 							const sizeStyle = editor.getStyleForNextShape(DefaultSizeStyle)
-							return editor.createShape<TLDrawShape>({
+							return editor.createShape({
 								id,
 								type: 'draw',
 								props: {
@@ -39,7 +33,7 @@ export function useExtraDragIconOverrides() {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => {
 							const sizeStyle = editor.getStyleForNextShape(DefaultSizeStyle)
-							return editor.createShape<TLDrawShape>({
+							return editor.createShape({
 								id,
 								type: 'draw',
 								props: {
@@ -62,7 +56,7 @@ export function useExtraDragIconOverrides() {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => {
 							const sizeStyle = editor.getStyleForNextShape(DefaultSizeStyle)
-							return editor.createShape<TLDrawShape>({
+							return editor.createShape({
 								id,
 								type: 'draw',
 								props: {

apps/examples/e2e/tests/export-snapshots.spec.tsx

@@ -13,7 +13,6 @@ import {
 	TLAsset,
 	TLBindingCreate,
 	TLShapePartial,
-	TLTextShape,
 	degreesToRadians,
 	mapObjectMapValues,
 	mockUniqueId,
@@ -1007,7 +1006,7 @@ test.describe('Export snapshots', () => {
 							.deleteShapes(editor.getSelectedShapeIds())
 
 						const titleId = tldrawApi.createShapeId()
-						editor.createShape<TLTextShape>({
+						editor.createShape({
 							id: titleId,
 							type: 'text',
 							x: 0,
@@ -1019,7 +1018,7 @@ test.describe('Export snapshots', () => {
 
 						for (const [rowName, testCases] of Object.entries(snapshot)) {
 							const rowTitleId = tldrawApi.createShapeId()
-							editor.createShape<TLTextShape>({
+							editor.createShape({
 								id: rowTitleId,
 								type: 'text',
 								x: 0,
@@ -1034,7 +1033,7 @@ test.describe('Export snapshots', () => {
 								testCases
 							)) {
 								const testCaseTitleId = tldrawApi.createShapeId()
-								editor.createShape<TLTextShape>({
+								editor.createShape({
 									id: testCaseTitleId,
 									type: 'text',
 									x,

apps/examples/e2e/tests/test-text.spec.ts

@@ -253,7 +253,7 @@ test.describe('text measurement', () => {
 	test('for auto-font-sizing shapes, should do normal font size for text that does not have long words', async () => {
 		const shape = await page.evaluate(() => {
 			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes<TLNoteShape>([
+			editor.createShapes([
 				{
 					id,
 					type: 'note',
@@ -275,7 +275,7 @@ test.describe('text measurement', () => {
 	test('for auto-font-sizing shapes, should auto-size text that have slightly long words', async () => {
 		const shape = await page.evaluate(() => {
 			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes<TLNoteShape>([
+			editor.createShapes([
 				{
 					id,
 					type: 'note',
@@ -297,7 +297,7 @@ test.describe('text measurement', () => {
 	test('for auto-font-sizing shapes, should auto-size text that have long words', async () => {
 		const shape = await page.evaluate(() => {
 			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes<TLNoteShape>([
+			editor.createShapes([
 				{
 					id,
 					type: 'note',
@@ -319,7 +319,7 @@ test.describe('text measurement', () => {
 	test('for auto-font-sizing shapes, should wrap text that has words that are way too long', async () => {
 		const shape = await page.evaluate(() => {
 			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes<TLNoteShape>([
+			editor.createShapes([
 				{
 					id,
 					type: 'note',
@@ -369,7 +369,7 @@ test.describe('text measurement', () => {
 
 		await page.evaluate(() => {
 			const id = 'shape:testShape' as TLShapeId
-			editor.createShapes<TLNoteShape>([
+			editor.createShapes([
 				{
 					id,
 					type: 'note',

apps/examples/src/examples/add-tool-to-toolbar/sticker-tool-util.tsx

@@ -1,4 +1,4 @@
-import { StateNode, TLTextShape, toRichText } from 'tldraw'
+import { StateNode, toRichText } from 'tldraw'
 
 // Check out the custom tool example for a more detailed explanation of the tool class.
 
@@ -12,7 +12,7 @@ export class StickerTool extends StateNode {
 
 	override onPointerDown() {
 		const { currentPagePoint } = this.editor.inputs
-		this.editor.createShape<TLTextShape>({
+		this.editor.createShape({
 			type: 'text',
 			x: currentPagePoint.x - OFFSET,
 			y: currentPagePoint.y - OFFSET,

apps/examples/src/examples/after-create-update-shape/AfterCreateUpdateShapeExample.tsx

@@ -1,5 +1,7 @@
 import { Editor, TLShape, TLShapeId, Tldraw, createShapeId, toRichText } from 'tldraw'
 
+type ShapeWithColor = Extract<TLShape, { props: { color: string } }>
+
 // this function takes a shape ID, and if that shape is red, sets all other red shapes on the same
 // page to black.
 function ensureOnlyOneRedShape(editor: Editor, shapeId: TLShapeId) {
@@ -13,7 +15,10 @@ function ensureOnlyOneRedShape(editor: Editor, shapeId: TLShapeId) {
 	// find any other red shapes on the same page:
 	const otherRedShapesOnPage = Array.from(editor.getPageShapeIds(pageId))
 		.map((id) => editor.getShape(id)!)
-		.filter((otherShape) => otherShape.id !== shape.id && isRedShape(otherShape))
+		.filter(
+			(otherShape): otherShape is ShapeWithColor =>
+				otherShape.id !== shape.id && isRedShape(otherShape)
+		)
 
 	// set the color of all those shapes to black:
 	editor.updateShapes(

apps/examples/src/examples/after-delete-shape/AfterDeleteShapeExample.tsx

@@ -51,7 +51,7 @@ function createDemoShapes(editor: Editor) {
 		},
 		...[50, 180, 310].map((x) => ({
 			id: createShapeId(),
-			type: 'geo',
+			type: 'geo' as const,
 			parentId: frameId,
 			x,
 			y: 120,