refactor(shapes): register all geo shapes through GeoTypeDefinition (tldraw#8730)

In order to test whether the `GeoTypeDefinition` extension API is
general enough to act as the canonical registration system for geo
shapes, this PR routes every built-in geo type (rectangle, ellipse,
cloud, etc.) through the same registry that powers `customGeoTypes`.
Built off of tldraw#8543's follow-up branch (`mime/config-geo-followup`).

The same registry now drives path generation, handle snapping, the style
panel picker, and creation defaults — so consumer-defined custom types
and built-ins go through identical code paths. No extension API changes;
built-ins just opt in to the existing one.

### Concepts

| Term | Type | Meaning |
|------|------|---------|
| `defaultGeoTypeDefinitions` | `Record<string, GeoTypeDefinition>` |
Registry of every built-in geo type's path/snap/icon/size behavior |
| `getGeoTypeDefinition(name, customGeoTypes?)` | function | Lookup
helper that prefers custom types, falls back to built-ins |

### What this collapses

| Before | After |
|--------|-------|
| `switch` over each `geo` value in `_getGeoPath` | `def.getPath(w, h,
shape, sw)` |
| Polygon/blobby `switch` in `getHandleSnapGeometry` | `def.snapType ===
'blobby' ? center : vertices+center` |
| Hardcoded `star`/`cloud` size cases in `Pointing.complete()` |
`def.defaultSize ?? { w: 200, h: 200 }` |
| `STYLES.geo` array merged with `customItems` in style panel |
`Object.entries({ ...defaultGeoTypeDefinitions, ...customGeoTypes })` |
| Collision check against `GeoShapeGeoStyle.values` in `configure()` |
Collision check against `defaultGeoTypeDefinitions` keys |

### Example

A consumer defining a custom geo type uses the same shape as a built-in:

```ts
// built-in (now lives in defaultGeoTypeDefinitions)
rectangle: {
  snapType: 'polygon',
  icon: 'geo-rectangle',
  getPath: (w, h, shape) => new PathBuilder()
    .moveTo(0, 0, { geometry: { isFilled: shape.props.fill !== 'none' } })
    .lineTo(w, 0).lineTo(w, h).lineTo(0, h).close(),
}

// consumer-defined (via GeoShapeUtil.configure({ customGeoTypes }))
'rounded-rect': {
  snapType: 'polygon',
  icon: 'geo-rounded-rect',
  getPath: (w, h, shape) => /* ... */,
}
```

### Change type

- [x] `improvement`

### Test plan

1. `yarn dev` and exercise every built-in geo type (rectangle, ellipse,
triangle, diamond, star, pentagon, hexagon, octagon, rhombus, rhombus-2,
oval, trapezoid, arrow-left/up/down/right, cloud, x-box, check-box,
heart) — creation by click, creation by drag, label editing,
fill/dash/color, snapping.
2. Confirm star and cloud still create at their special default sizes
(200x190 and 300x180).
3. Confirm alt+double-click still toggles rectangle ↔ check-box.
4. Open the `Custom geo types` example and confirm both built-ins and
custom types render in the style panel picker.
5. Confirm `customGeoTypes` collision warning still fires when a
consumer registers a key that matches a built-in.

- [x] Unit tests (existing geo tests pass — `GeoShapeUtil.test.tsx`,
`GeoShapeTool.test.ts`)
- [ ] End to end tests

### Release notes

- The built-in geo types are now registered through the same
`GeoTypeDefinition` system as `customGeoTypes`. Public-facing behavior
is unchanged.

### API changes

- Added `defaultGeoTypeDefinitions` (public) — the registry of built-in
geo type definitions.
- Added `getGeoTypeDefinition(name, customGeoTypes?)` (public) — lookup
helper.
- Removed the internal `getCustomGeoType` helper (replaced by
`getGeoTypeDefinition`).

### Code changes

| Section         | LOC change |
| --------------- | ---------- |
| Core code       | +319 / -225 |
| Automated files | +115 / -0  |

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

Author: mimecuvalo

packages/tldraw/api-report.api.md

@@ -1149,6 +1149,118 @@ export function DefaultFollowingIndicator(): JSX.Element | null;
 // @public (undocumented)
 export const DefaultFontFaces: TLDefaultFonts;
 
+// @public
+export const defaultGeoTypeDefinitions: {
+    readonly 'arrow-down': {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-arrow-down";
+        readonly snapType: "polygon";
+    };
+    readonly 'arrow-left': {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-arrow-left";
+        readonly snapType: "polygon";
+    };
+    readonly 'arrow-right': {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-arrow-right";
+        readonly snapType: "polygon";
+    };
+    readonly 'arrow-up': {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-arrow-up";
+        readonly snapType: "polygon";
+    };
+    readonly 'check-box': {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-check-box";
+        readonly snapType: "polygon";
+    };
+    readonly 'rhombus-2': {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-rhombus-2";
+        readonly snapType: "polygon";
+    };
+    readonly 'x-box': {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape, strokeWidth: number) => PathBuilder;
+        readonly icon: "geo-x-box";
+        readonly snapType: "polygon";
+    };
+    readonly cloud: {
+        readonly defaultSize: {
+            readonly h: 180;
+            readonly w: 300;
+        };
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-cloud";
+        readonly snapType: "blobby";
+    };
+    readonly diamond: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-diamond";
+        readonly snapType: "polygon";
+    };
+    readonly ellipse: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-ellipse";
+        readonly snapType: "blobby";
+    };
+    readonly heart: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-heart";
+        readonly snapType: "blobby";
+    };
+    readonly hexagon: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-hexagon";
+        readonly snapType: "polygon";
+    };
+    readonly octagon: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-octagon";
+        readonly snapType: "polygon";
+    };
+    readonly oval: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-oval";
+        readonly snapType: "blobby";
+    };
+    readonly pentagon: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-pentagon";
+        readonly snapType: "polygon";
+    };
+    readonly rectangle: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-rectangle";
+        readonly snapType: "polygon";
+    };
+    readonly rhombus: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-rhombus";
+        readonly snapType: "polygon";
+    };
+    readonly star: {
+        readonly defaultSize: {
+            readonly h: 190;
+            readonly w: 200;
+        };
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-star";
+        readonly snapType: "polygon";
+    };
+    readonly trapezoid: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-trapezoid";
+        readonly snapType: "polygon";
+    };
+    readonly triangle: {
+        readonly getPath: (w: number, h: number, shape: TLGeoShape) => PathBuilder;
+        readonly icon: "geo-triangle";
+        readonly snapType: "polygon";
+    };
+};
+
 // @public (undocumented)
 export function defaultHandleExternalEmbedContent<T>(editor: Editor, { point, url, embed }: {
     embed: T;
@@ -2240,6 +2352,9 @@ export function getFontFamily(theme: TLTheme, font: string): string;
 // @public
 export function getFontStyleItems(theme: TLTheme): StyleValuesForUi<string>;
 
+// @public
+export function getGeoTypeDefinition(name: string, customGeoTypes?: Record<string, GeoTypeDefinition>): GeoTypeDefinition | undefined;
+
 // @public (undocumented)
 export function getHitShapeOnCanvasPointerDown(editor: Editor, hitLabels?: boolean): TLShape | undefined;
 

packages/tldraw/src/index.ts

@@ -212,7 +212,11 @@ export {
 	type GeoShapeOptions,
 	type GeoShapeUtilDisplayValues,
 } from './lib/shapes/geo/GeoShapeUtil'
-export { type GeoTypeDefinition } from './lib/shapes/geo/getGeoShapePath'
+export {
+	defaultGeoTypeDefinitions,
+	getGeoTypeDefinition,
+	type GeoTypeDefinition,
+} from './lib/shapes/geo/getGeoShapePath'
 export { HighlightShapeTool } from './lib/shapes/highlight/HighlightShapeTool'
 export {
 	HighlightShapeUtil,

packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -55,7 +55,12 @@ import { RichTextLabel, RichTextSVG } from '../shared/RichTextLabel'
 import { useIsReadyForEditing } from '../shared/useEditablePlainText'
 import { useEfficientZoomThreshold } from '../shared/useEfficientZoomThreshold'
 import { GeoShapeBody } from './GeoShapeBody'
-import { type GeoTypeDefinition, getCustomGeoType, getGeoShapePath } from './getGeoShapePath'
+import {
+	defaultGeoTypeDefinitions,
+	type GeoTypeDefinition,
+	getGeoShapePath,
+	getGeoTypeDefinition,
+} from './getGeoShapePath'
 
 // imperfect but good enough, should be the width of the W in the font / size combo
 const GEO_SHAPE_MIN_WIDTHS = Object.freeze({
@@ -90,7 +95,7 @@ const GEO_SHAPE_EMPTY_LABEL_SIZE = Object.freeze({ w: 0, h: 0 })
 // by previous `configure()` calls. This lets repeat `configure()` calls reuse
 // the same custom key (e.g. when wrapping/extending the util) without having
 // the entry stripped from `options.customGeoTypes`.
-const BUILTIN_GEO_TYPES: ReadonlySet<string> = new Set(GeoShapeGeoStyle.values)
+const BUILTIN_GEO_TYPES: ReadonlySet<string> = new Set(Object.keys(defaultGeoTypeDefinitions))
 
 /** @public */
 export interface GeoShapeUtilDisplayValues {
@@ -326,42 +331,15 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		const geometry = this.getGeometry(shape)
 		// we only want to snap handles to the outline of the shape - not to its label etc.
 		const outline = geometry.children[0]
-		switch (shape.props.geo) {
-			case 'arrow-down':
-			case 'arrow-left':
-			case 'arrow-right':
-			case 'arrow-up':
-			case 'check-box':
-			case 'diamond':
-			case 'hexagon':
-			case 'octagon':
-			case 'pentagon':
-			case 'rectangle':
-			case 'rhombus':
-			case 'rhombus-2':
-			case 'star':
-			case 'trapezoid':
-			case 'triangle':
-			case 'x-box':
-				// poly-line type shapes hand snap points for each vertex & the center
-				return { outline: outline, points: [...outline.vertices, geometry.bounds.center] }
-			case 'cloud':
-			case 'ellipse':
-			case 'heart':
-			case 'oval':
-				// blobby shapes only have a snap point in their center
-				return { outline: outline, points: [geometry.bounds.center] }
-			default: {
-				const customType = getCustomGeoType(shape.props.geo, this.options.customGeoTypes)
-				if (customType) {
-					if (customType.snapType === 'blobby') {
-						return { outline: outline, points: [geometry.bounds.center] }
-					}
-					return { outline: outline, points: [...outline.vertices, geometry.bounds.center] }
-				}
-				throw new Error(`Unknown geo type: ${shape.props.geo}`)
-			}
+		const def = getGeoTypeDefinition(shape.props.geo, this.options.customGeoTypes)
+		if (!def) {
+			throw new Error(`Unknown geo type: ${shape.props.geo}`)
+		}
+		// blobby shapes only snap to the center; polygon shapes snap to vertices + center.
+		if (def.snapType === 'blobby') {
+			return { outline: outline, points: [geometry.bounds.center] }
 		}
+		return { outline: outline, points: [...outline.vertices, geometry.bounds.center] }
 	}
 
 	override getText(shape: TLGeoShape) {
@@ -738,9 +716,9 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 			}
 		}
 
-		const customType = getCustomGeoType(shape.props.geo, this.options.customGeoTypes)
-		if (customType?.onDoubleClick) {
-			const result = customType.onDoubleClick(shape)
+		const def = getGeoTypeDefinition(shape.props.geo, this.options.customGeoTypes)
+		if (def?.onDoubleClick) {
+			const result = def.onDoubleClick(shape)
 			if (result) {
 				return { ...shape, props: { ...shape.props, ...result.props } }
 			}